Luxury Fashion 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_sustainable_fashion_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-3xl mx-auto mb-12">
      <div data-motion="hero" class="space-y-6">
        <span data-motion="badge" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Sustainable Fashion
        </span>
        <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">Conscious</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Style</span>
        </h1>
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400">
          Embrace sustainable fashion that looks good and does good. Shop ethically crafted pieces that make a positive impact on our planet.
        </p>
        <div class="flex flex-wrap justify-center gap-4 pt-2">
          <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 Collection
            <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">
            Watch Our Story
            <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>
    <div class="grid grid-cols-3 gap-4 mb-12">
      <div data-motion="image" class="rounded-3xl overflow-hidden aspect-3/4">
        <img data-motion="image" src="https://images.unsplash.com/photo-1762596958689-74dac544f195?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxmYXNoaW9uJTIwY2xvdGhpbmclMjBzdHlsZSUyMGx1eHVyeSUyMGJyYW5kfGVufDF8MHx8fDE3NjkzMTg3NTF8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Sustainable clothing" class="w-full h-full object-cover">
      </div>
      <div data-motion="image" class="rounded-3xl overflow-hidden aspect-3/4">
        <img data-motion="image" src="https://images.unsplash.com/photo-1759563874667-73fd773d33d0?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxmYXNoaW9uJTIwY2xvdGhpbmclMjBzdHlsZSUyMGx1eHVyeSUyMGJyYW5kfGVufDF8MHx8fDE3NjkzMTg3NTF8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Eco fashion" class="w-full h-full object-cover">
      </div>
      <div data-motion="image" class="rounded-3xl overflow-hidden aspect-3/4">
        <img data-motion="image" src="https://images.unsplash.com/photo-1760820708737-d204f21bc602?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxmYXNoaW9uJTIwY2xvdGhpbmclMjBzdHlsZSUyMGx1eHVyeSUyMGJyYW5kfGVufDF8MHx8fDE3NjkzMTg3NTF8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Natural fabrics" class="w-full h-full object-cover">
      </div>
    </div>
    <div data-motion="social-proof" class="flex flex-wrap items-center justify-center gap-8">
      <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
        <svg class="w-5 h-5 text-indigo-600" 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-sm">100% Organic</span>
      </div>
      <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span class="text-sm">Carbon Neutral</span>
      </div>
      <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
        </svg>
        <span class="text-sm">Fair Trade</span>
      </div>
      <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        <span class="text-sm">Recyclable</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.