Construction Company 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_real_estate_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 data-motion="image" class="relative w-full h-80 sm:h-[450px] rounded-3xl overflow-hidden">
        <img data-motion="image" src="https://images.unsplash.com/photo-1768204040341-6ea6aa4b5746?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMGNvbXBhbnl8ZW58MXwwfHx8MTc2OTMyMDMxMHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Modern luxury home" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-linear-to-t from-slate-900/80 via-slate-900/30 to-transparent"></div>
        <div class="absolute bottom-6 left-6 right-6">
          <div data-motion="card" class="bg-white/95 dark:bg-neutral-900/95 backdrop-blur-xs p-4 rounded-2xl">
            <div class="grid sm:grid-cols-4 gap-3">
              <input data-motion="input" type="text" placeholder="City or ZIP" aria-label="Location" class="px-4 py-3 bg-slate-100 dark:bg-neutral-800 border-0 rounded-xl text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-indigo-500">
              <select aria-label="Property type" class="px-4 py-3 bg-slate-100 dark:bg-neutral-800 border-0 rounded-xl text-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500">
                <option>All Types</option>
                <option>House</option>
                <option>Apartment</option>
                <option>Condo</option>
              </select>
              <select aria-label="Price range" class="px-4 py-3 bg-slate-100 dark:bg-neutral-800 border-0 rounded-xl text-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500">
                <option>Any Price</option>
                <option>$100K - $300K</option>
                <option>$300K - $500K</option>
                <option>$500K+</option>
              </select>
              <button data-motion="button" type="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl transition-colors flex items-center justify-center gap-2">
                <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                Search
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="grid lg:grid-cols-5 gap-10">
        <div data-motion="hero" class="lg:col-span-3 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-2 h-2 bg-indigo-500 rounded-full animate-pulse"></span>
            New Listings
          </span>
          <h1 class="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white leading-[1.1]">
            <span data-animate="heading">Find Your</span>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Dream Home</span>
          </h1>
          <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400">
            Discover exceptional properties in prime locations. From luxury apartments to family homes, we help you find the perfect space to call your own.
          </p>
        </div>
        <div data-motion="card" class="lg:col-span-2 flex flex-col gap-6">
          <div class="flex items-center gap-4">
            <div class="flex -space-x-2">
              <img data-motion="avatar" src="https://images.unsplash.com/photo-1766051238792-a671ca6e79c0?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMGNvbXBhbnl8ZW58MXwwfHx8MTc2OTMyMDMxMHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-10 h-10 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
              <img data-motion="avatar" src="https://images.unsplash.com/photo-1759912497669-f2b90b1d3fec?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMGNvbXBhbnl8ZW58MXwwfHx8MTc2OTMyMDMxMHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-10 h-10 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
              <img data-motion="avatar" src="https://images.unsplash.com/photo-1768733993705-6cddd3e81084?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxjb25zdHJ1Y3Rpb24lMjBidWlsZGluZyUyMGFyY2hpdGVjdHVyZSUyMGNvbXBhbnl8ZW58MXwwfHx8MTc2OTMyMDMxMHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-10 h-10 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            </div>
            <div>
              <div class="flex items-center gap-1">
                <svg class="w-4 h-4 text-indigo-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                <span class="font-semibold text-slate-900 dark:text-white">4.9</span>
              </div>
              <p class="text-sm text-slate-500 dark:text-neutral-400">2,000+ Happy Clients</p>
            </div>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div class="p-4 bg-indigo-50 dark:bg-indigo-950/30 rounded-xl">
              <span class="text-2xl font-bold text-slate-900 dark:text-white block">5K+</span>
              <span class="text-slate-500 dark:text-neutral-400 text-sm">Properties</span>
            </div>
            <div class="p-4 bg-slate-50 dark:bg-neutral-900 rounded-xl">
              <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 block">98%</span>
              <span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
            </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.