Creative 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_digital_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="flex flex-col gap-12">
      <div class="w-full h-72 sm:h-96 rounded-3xl overflow-hidden relative" data-motion="image">
        <img data-motion="image"
          src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1200&auto=format&fit=crop&q=80"
          alt="Digital agency team collaboration"
          class="w-full h-full object-cover"
        >
        <div data-motion="card" class="absolute top-6 left-6 px-4 py-2 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xs rounded-full">
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold">Since 2012</span>
        </div>
      </div>
      <div class="grid lg:grid-cols-5 gap-10">
        <div class="lg:col-span-3" 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">Digital 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">We Build</span><br>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">Digital Futures</span>
          </h1>
          <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
            Partner with us to transform your vision into exceptional digital experiences. From strategy to execution, we deliver solutions that drive growth and innovation.
          </p>
          <div class="flex flex-wrap gap-4">
            <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 Your Project
            </a>
            <a href="#" data-motion="button" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300">
              View Case Studies
              <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="lg:col-span-2 flex flex-col gap-6">
          <div data-motion="card" class="p-6 bg-indigo-50 dark:bg-indigo-950/30 rounded-2xl">
            <span class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 block mb-1">150+</span>
            <span class="text-slate-600 dark:text-neutral-400">Projects delivered for clients worldwide</span>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div data-motion="card" class="p-5 bg-slate-50 dark:bg-neutral-900 rounded-2xl">
              <span class="text-2xl font-bold text-slate-900 dark:text-white block">12</span>
              <span class="text-slate-500 dark:text-neutral-400 text-sm">Years</span>
            </div>
            <div data-motion="card" class="p-5 bg-slate-50 dark:bg-neutral-900 rounded-2xl">
              <span class="text-2xl font-bold text-slate-900 dark:text-white block">98%</span>
              <span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
            </div>
          </div>
          <div data-motion="card" class="p-5 bg-slate-50 dark:bg-neutral-900 rounded-2xl">
            <div class="flex items-center gap-3">
              <div class="flex -space-x-2">
                <img data-motion="avatar" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1200&auto=format&fit=crop&q=80" alt="Team member" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
                <img data-motion="avatar" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1200&auto=format&fit=crop&q=80" alt="Team member" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
                <img data-motion="avatar" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1200&auto=format&fit=crop&q=80" alt="Team member" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
              </div>
              <span class="text-slate-600 dark:text-neutral-400 text-sm">35+ team members</span>
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 pt-8 border-t border-slate-200 dark:border-neutral-800" data-motion="social-proof">
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
          <span class="text-sm font-medium">Web Development</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
          </svg>
          <span class="text-sm font-medium">Brand Design</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/>
          </svg>
          <span class="text-sm font-medium">Digital Marketing</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
          <span class="text-sm font-medium">Mobile Apps</span>
        </div>
      </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.