Residential Construction 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_interior_design_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="flex flex-col gap-12">
      <div class="grid lg:grid-cols-2 gap-12 items-end">
        <div data-motion="hero">
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block">Interior Design Studio</span>
          <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none">
            <span data-animate="heading">Elegant</span><br>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">Spaces</span>
          </h1>
        </div>
        <div data-motion="card">
          <p class="text-xl text-slate-600 dark:text-neutral-400 leading-relaxed mb-6" data-animate="text">
            Where elegance meets functionality. We transform spaces into stunning environments that reflect your unique style and enhance your daily life.
          </p>
          <div class="flex flex-wrap gap-4">
            <a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
              View Portfolio
            </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">
              Book Consultation
              <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 lg:grid-cols-3 gap-5">
        <div class="lg:col-span-2 rounded-3xl overflow-hidden group cursor-pointer" data-motion="image">
          <div class="relative h-80">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1766157669142-b8724d7fdc36?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMHJlc2lkZW50aWFsfGVufDF8MHx8fDE3NjkzMjAzMTl8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Modern living room"
              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            >
            <div class="absolute inset-0 bg-linear-to-t from-black/60 to-transparent p-8 flex items-end">
              <div>
                <h3 class="text-2xl font-bold text-white mb-1">Living Spaces</h3>
                <p class="text-white/80 text-sm">Curated designs for modern living</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-indigo-50 dark:bg-indigo-950/30 rounded-3xl p-8 flex flex-col justify-center" data-motion="card">
          <span class="text-5xl font-bold text-indigo-600 dark:text-indigo-400 block mb-2">25%</span>
          <span class="text-slate-900 dark:text-white font-semibold text-lg mb-4">Seasonal Discount</span>
          <p class="text-slate-600 dark:text-neutral-400 text-sm mb-4">Transform your space with our exclusive limited-time offer.</p>
          <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold text-sm hover:underline">Learn More →</a>
        </div>
        <div class="rounded-3xl overflow-hidden group cursor-pointer" data-motion="image">
          <div class="relative h-64">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1758367620590-cd80c6d2affc?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMHJlc2lkZW50aWFsfGVufDF8MHx8fDE3NjkzMjAzMTl8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Minimalist bedroom"
              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            >
            <div class="absolute inset-0 bg-linear-to-t from-black/60 to-transparent p-6 flex items-end">
              <h3 class="text-xl font-bold text-white">Bedroom Collection</h3>
            </div>
          </div>
        </div>
        <div class="rounded-3xl overflow-hidden group cursor-pointer" data-motion="image">
          <div class="relative h-64">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1673977597041-7e6512719d16?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMHJlc2lkZW50aWFsfGVufDF8MHx8fDE3NjkzMjAzMTl8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Contemporary kitchen"
              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            >
            <div class="absolute inset-0 bg-linear-to-t from-black/60 to-transparent p-6 flex items-end">
              <h3 class="text-xl font-bold text-white">Kitchen Designs</h3>
            </div>
          </div>
        </div>
        <div class="rounded-3xl overflow-hidden group cursor-pointer" data-motion="image">
          <div class="relative h-64">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1673977597435-b794445d3fe2?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMHJlc2lkZW50aWFsfGVufDF8MHx8fDE3NjkzMjAzMTl8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Luxury office"
              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            >
            <div class="absolute inset-0 bg-linear-to-t from-black/60 to-transparent p-6 flex items-end">
              <h3 class="text-xl font-bold text-white">Office Interiors</h3>
            </div>
          </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.