Digital Marketing Agency Tailwind CSS Template

Hero section code

The first screen of this free template, as it ships. Sign in to copy the full page.

<section id="_hero_agency_showcase_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-4xl mx-auto mb-16" data-motion="hero">
      <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block">Creative Agency</span>
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6"><span data-animate="heading">Digital Marketing That Drives Results</span></h1>
      <p class="text-lg text-slate-600 dark:text-neutral-400 max-w-2xl mx-auto" data-animate="text">
        We blend creativity with strategy to build brands that resonate and digital products that perform exceptionally.
      </p>
    </div>
    <div class="grid lg:grid-cols-12 gap-5">
      <div class="lg:col-span-8" data-motion="card">
        <div class="relative rounded-3xl overflow-hidden h-80 lg:h-[450px] group">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&auto=format&fit=crop&q=80"
            alt="Creative team collaboration in modern office"
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
          >
          <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
          <div class="absolute bottom-6 left-6 right-6 flex items-end justify-between">
            <div>
              <span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block">Our Team</span>
              <h3 class="text-white text-xl font-bold">Collaborative Excellence</h3>
            </div>
            <a href="#" class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-xs flex items-center justify-center hover:bg-indigo-600 transition-colors">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="lg:col-span-4 flex flex-col gap-5">
        <div data-motion="card" class="bg-indigo-600 rounded-3xl p-6 flex-1 flex flex-col justify-between">
          <div>
            <h3 class="text-white text-xl font-bold mb-2">Ready to Start?</h3>
            <p class="text-indigo-100 text-sm">Let's discuss your next project and bring your vision to life.</p>
          </div>
          <a data-motion="button" href="#" class="mt-6 inline-flex items-center gap-2 text-white font-semibold hover:gap-3 transition-all duration-300 w-fit">
            Get in Touch
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
          </a>
        </div>
        <div data-motion="card" class="relative rounded-3xl overflow-hidden h-48 group">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&auto=format&fit=crop&q=80"
            alt="Design process and brainstorming"
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
          >
          <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4">
            <span class="text-white font-semibold text-sm">Our Process</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-center gap-4 mt-10" data-motion="buttons">
      <a href="#" data-motion="button" class="px-6 py-3 bg-slate-900 dark:bg-white hover:bg-slate-800 dark:hover:bg-neutral-100 transition-colors rounded-full text-white dark:text-neutral-900 font-semibold">
        View Portfolio
      </a>
      <a href="#" data-motion="button" class="px-6 py-3 border border-slate-300 dark:border-neutral-700 hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors rounded-full text-slate-900 dark:text-white font-semibold">
        Our Services
      </a>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16 pt-12 border-t border-slate-200 dark:border-neutral-800">
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">150+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Projects Delivered</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">12</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Years Experience</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">98%</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Client Satisfaction</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">25+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Team Members</span>
      </div>
    </div>
  </div>
</section>

From template to your website

Open the editor to try colors, fonts, and screen sizes, then sign in with an account that includes this template to copy or download its HTML. It needs Tailwind CSS v4 and, for the dark theme, @custom-variant dark (&:where(.dark, .dark *));.

Text, images, and testimonials are placeholders. Replace them, and connect forms or booking to your own services before publishing. Usage is covered by the OpenTailwind license.