Fashion Boutique 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_product_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="grid lg:grid-cols-2 gap-12 items-center">
      <div data-motion="hero" class="space-y-8 order-2 lg:order-1">
        <div class="flex items-center gap-2">
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Products</span>
          <span class="text-indigo-600 dark:text-indigo-400">/</span>
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-medium">Smart Devices</span>
        </div>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-[1.1]">
          <span data-animate="heading">Quantum Pro</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Wireless</span>
        </h1>
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 max-w-lg">
          Experience next-generation audio with our flagship wireless earbuds. Featuring adaptive noise cancellation, spatial audio, and 40-hour battery life.
        </p>
        <div class="flex flex-wrap gap-4">
          <a data-motion="button" href="#" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors">
            Shop Now
            <svg class="w-4 h-4" 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>
          <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300">
            Learn More
            <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 class="flex flex-wrap gap-3 pt-4">
          <div data-motion="card" class="flex items-center gap-2 px-4 py-2 bg-indigo-50 dark:bg-indigo-950/30 rounded-full">
            <svg class="w-4 h-4 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="M5 13l4 4L19 7"/>
            </svg>
            <span class="text-slate-700 dark:text-neutral-300 text-sm">Noise Cancellation</span>
          </div>
          <div data-motion="card" class="flex items-center gap-2 px-4 py-2 bg-indigo-50 dark:bg-indigo-950/30 rounded-full">
            <svg class="w-4 h-4 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="M5 13l4 4L19 7"/>
            </svg>
            <span class="text-slate-700 dark:text-neutral-300 text-sm">40hr Battery</span>
          </div>
          <div data-motion="card" class="flex items-center gap-2 px-4 py-2 bg-indigo-50 dark:bg-indigo-950/30 rounded-full">
            <svg class="w-4 h-4 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="M5 13l4 4L19 7"/>
            </svg>
            <span class="text-slate-700 dark:text-neutral-300 text-sm">Spatial Audio</span>
          </div>
        </div>
      </div>
      <div class="order-1 lg:order-2">
        <div data-motion="image" class="relative rounded-3xl overflow-hidden bg-slate-100 dark:bg-neutral-900 aspect-square">
          <img data-motion="image" src="https://images.unsplash.com/photo-1761370571873-5d869310d731?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxmYXNoaW9uJTIwY2xvdGhpbmclMjBzdHlsZSUyMGJvdXRpcXVlfGVufDF8MHx8fDE3NjkzMTg3NDd8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Wireless earbuds" class="w-full h-full object-cover">
          <div class="absolute top-4 right-4 px-3 py-1.5 bg-indigo-600 text-white text-sm font-semibold rounded-full">
            New
          </div>
          <div class="absolute bottom-4 left-4 px-4 py-2 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xs rounded-xl">
            <span class="text-2xl font-bold text-slate-900 dark:text-white">$299</span>
          </div>
        </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.