Streetwear Brand 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_luxury_fashion_v6_001" class="py-20 sm:py-24 bg-slate-100 dark:bg-neutral-950 min-h-screen">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-12 gap-8 items-start">
      <div class="lg:col-span-5 lg:sticky lg:top-24">
        <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-6 block">Spring Collection 2026</span>
        <h1>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none tracking-tight">DEFINE</span>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none tracking-tight mt-2">YOUR</span>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-indigo-600 dark:text-indigo-400 leading-none tracking-tight mt-2">STYLE</span>
        </h1>
        <p data-animate="text" class="mt-8 text-xl text-slate-600 dark:text-neutral-400 leading-relaxed">
          Timeless elegance meets contemporary design. Discover pieces that transcend seasons and define your personal aesthetic.
        </p>
        <div data-motion="button" class="flex flex-wrap gap-4 mt-10">
          <a href="#" class="px-8 py-4 bg-slate-900 dark:bg-white text-white dark:text-neutral-900 font-semibold hover:bg-slate-800 dark:hover:bg-neutral-100 transition-colors">Shop Collection</a>
          <a href="#" class="px-8 py-4 text-slate-900 dark:text-white font-semibold border-2 border-slate-900 dark:border-white hover:bg-slate-900 hover:text-white dark:hover:bg-white dark:hover:text-neutral-900 transition-all">Lookbook</a>
        </div>
      </div>
      <div class="lg:col-span-7 space-y-4">
        <div data-motion="image" class="rounded-3xl overflow-hidden h-[450px]">
          <img data-motion="image" src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=1200&auto=format&fit=crop&q=80" alt="Fashion model" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div data-motion="image" class="rounded-2xl overflow-hidden h-64">
            <img data-motion="image" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=600&auto=format&fit=crop&q=80" alt="Fashion details" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
          </div>
          <div data-motion="image" class="rounded-2xl overflow-hidden h-64">
            <img data-motion="image" src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&auto=format&fit=crop&q=80" alt="Accessories" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
    .carousel-track { display: flex; transition: transform 0.5s ease-out; }
  </style>

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.