Skincare 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_perfume_v6_001" class="relative min-h-screen bg-white dark:bg-neutral-950 overflow-hidden">
  <div class="absolute inset-0 bg-linear-to-br from-indigo-100/50 via-white to-white dark:from-indigo-950/50 dark:via-neutral-950 dark:to-neutral-950"></div>
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen flex items-center">
    <div class="grid lg:grid-cols-2 gap-16 items-center w-full py-20">
      <div>
        <span data-motion="badge" class="inline-block text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-6">Maison de Parfum</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">THE ART OF</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-3">SCENT</span>
        </h1>
        <p data-animate="text" class="mt-8 text-xl text-slate-600 dark:text-neutral-400 max-w-lg leading-relaxed">
          Crafted by master perfumers using the world's rarest ingredients. Each fragrance tells a story of elegance, mystery, and timeless sophistication.
        </p>
        <div data-motion="button" class="flex flex-wrap gap-4 mt-10">
          <a data-motion="button" href="#" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-full transition-colors">Discover Collection</a>
          <a href="#" class="px-8 py-4 bg-slate-100 dark:bg-white/10 backdrop-blur-xs text-slate-900 dark:text-white font-semibold rounded-full border border-slate-200 dark:border-white/20 hover:bg-slate-200 dark:hover:bg-white/20 transition-colors">Book Consultation</a>
        </div>
        <div data-motion="features" class="flex gap-8 mt-12 pt-8 border-t border-slate-200 dark:border-neutral-800">
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white">150+</span>
            <p class="text-slate-500 text-sm mt-1">Rare Ingredients</p>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white">40</span>
            <p class="text-slate-500 text-sm mt-1">Years Heritage</p>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white">12</span>
            <p class="text-slate-500 text-sm mt-1">Signature Scents</p>
          </div>
        </div>
      </div>
      <div class="relative">
        <div data-motion="image" class="relative z-10">
          <img data-motion="image" src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=800&auto=format&fit=crop&q=80" alt="Luxury perfume bottle" class="w-full max-w-md mx-auto rounded-3xl">
        </div>
        <div data-motion="card" class="absolute bottom-4 left-0 p-5 bg-white/80 dark:bg-white/10 backdrop-blur-xl rounded-2xl border border-slate-200 dark:border-white/20 max-w-[220px] z-20">
          <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-full overflow-hidden">
              <img data-motion="image" src="https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?w=200&auto=format&fit=crop&q=80" alt="Perfumer" class="w-full h-full object-cover">
            </div>
            <div>
              <span class="text-slate-900 dark:text-white font-semibold block">Marie Laurent</span>
              <span class="text-indigo-600 dark:text-indigo-400 text-sm">Master Perfumer</span>
            </div>
          </div>
          <p class="text-slate-600 dark:text-neutral-400 text-sm mt-4 italic">"Each fragrance is a journey through memory and emotion."</p>
        </div>
        <div data-motion="card" class="absolute top-4 right-4 p-4 bg-indigo-600 backdrop-blur-xs rounded-2xl z-20">
          <span class="text-white font-semibold text-sm">New Release</span>
          <span class="text-white/80 text-xs block mt-1">Noir Éternel</span>
        </div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-indigo-600/20 rounded-full blur-3xl -z-10"></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.