Eco Friendly Fashion 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_fine_jewelry_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950 min-h-screen flex items-center">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <div>
        <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-6 block">Haute Joaillerie</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">Eternal</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">Brilliance</span>
        </h1>
        <p data-animate="text" class="mt-8 text-xl text-slate-600 dark:text-neutral-400 leading-relaxed max-w-lg">
          Each piece is a masterwork of artistry and precision. Rare gemstones set in designs that capture light and imagination.
        </p>
        <div data-motion="button" class="flex flex-wrap gap-4 mt-10">
          <a href="#" class="px-8 py-4 bg-indigo-500 hover:bg-indigo-400 text-slate-900 font-semibold transition-colors">Explore Collection</a>
          <a href="#" class="px-8 py-4 text-slate-900 dark:text-white font-semibold border border-slate-300 dark:border-neutral-700 hover:border-indigo-500 transition-colors">Book Consultation</a>
        </div>
        <div data-motion="stats" class="grid grid-cols-3 gap-8 mt-16 pt-8 border-t border-slate-200 dark:border-neutral-800">
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white">1847</span>
            <p class="text-slate-500 text-sm mt-1">Founded</p>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white">GIA</span>
            <p class="text-slate-500 text-sm mt-1">Certified</p>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white">∞</span>
            <p class="text-slate-500 text-sm mt-1">Warranty</p>
          </div>
        </div>
      </div>
      <div class="relative">
        <div data-motion="image" class="rounded-3xl overflow-hidden">
          <img data-motion="image" src="https://images.unsplash.com/photo-1758520387260-dbd4b5365007?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxlY29tbWVyY2UlMjBzaG9wcGluZyUyMHByb2R1Y3RzJTIwZnJpZW5kbHklMjBmYXNoaW9ufGVufDF8MHx8fDE3NjkzMTg3NTd8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Diamond jewelry" class="w-full h-[500px] object-cover">
        </div>
        <div data-motion="card" class="absolute -bottom-6 -left-6 p-6 bg-white/10 backdrop-blur-xl rounded-2xl border border-white/20">
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold">Limited Edition</span>
          <p class="text-slate-900 dark:text-white font-bold text-lg mt-1">Celestial Collection</p>
        </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.