Paid Ads 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_creative_agency_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="mb-16" data-motion="hero">
      <div class="grid lg:grid-cols-2 gap-8 items-end mb-8">
        <div>
          <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-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none"><span data-animate="heading">Ads That <span class="text-indigo-500 dark:text-indigo-400">Convert</span></span></h1>
        </div>
        <div class="lg:text-right">
          <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-indigo-600 dark:text-indigo-400 leading-none">
            <span data-animate="heading">Digital Stories</span>
          </h1>
        </div>
      </div>
      <div class="grid lg:grid-cols-3 gap-8">
        <p class="text-lg text-slate-600 dark:text-neutral-400 lg:col-span-1" data-animate="text">
          We transform bold ideas into memorable digital experiences. Our team blends strategy, design, and technology to elevate your brand.
        </p>
        <div class="lg:col-span-2 flex flex-wrap gap-4 lg:justify-end items-start">
          <a href="#" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
            Start a Project
          </a>
          <a href="#" data-motion="button" class="inline-flex items-center gap-3 text-indigo-600 dark:text-indigo-400 font-semibold group">
            <span class="w-12 h-12 rounded-full border-2 border-indigo-600 dark:border-indigo-400 flex items-center justify-center group-hover:bg-indigo-600 dark:group-hover:bg-indigo-400 group-hover:text-white dark:group-hover:text-neutral-900 transition-all duration-300">
              <svg class="w-5 h-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </span>
            Watch Showreel
          </a>
        </div>
      </div>
    </div>
    <div class="grid lg:grid-cols-3 gap-5">
      <div class="lg:col-span-2" data-motion="card">
        <div class="relative rounded-3xl overflow-hidden h-80 lg:h-[400px] group">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1200&auto=format&fit=crop&q=80"
            alt="Creative team brainstorming session"
            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">
            <span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block">Featured Work</span>
            <h3 class="text-white text-xl font-bold">Brand Transformation</h3>
          </div>
        </div>
      </div>
      <div data-motion="card" class="bg-indigo-600 rounded-3xl p-8 flex flex-col justify-between">
        <div>
          <span data-motion="badge" class="text-indigo-100 text-sm font-medium uppercase tracking-wider mb-2 block">Our Impact</span>
          <span class="text-white text-5xl font-bold block mb-2">150+</span>
          <p class="text-indigo-100">Projects delivered for clients worldwide</p>
        </div>
        <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-white font-semibold hover:gap-3 transition-all duration-300 w-fit mt-6">
          View Portfolio
          <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>
    <div class="grid grid-cols-3 gap-8 mt-12 pt-10 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">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-slate-900 dark:text-white 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-slate-900 dark:text-white 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.