Plumber 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_smart_home_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="grid lg:grid-cols-3 gap-5">
      <div data-motion="hero" class="lg:col-span-2 p-8 lg:p-12 bg-indigo-50 dark:bg-indigo-950/30 rounded-3xl">
        <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 mb-6">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Smart Living
        </span>
        <h1 class="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white leading-[1.1] mb-6">
          <span data-animate="heading">Connected</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Sanctuary</span>
        </h1>
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 max-w-lg mb-8">
          Experience the future of living with intelligent automation. Control lighting, climate, security, and entertainment from anywhere.
        </p>
        <div class="flex flex-wrap gap-4">
          <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">
            Explore Products
            <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 Demo
            <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 data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-3xl flex flex-col justify-between">
        <div class="space-y-4">
          <div class="flex items-center justify-between p-4 bg-white dark:bg-neutral-800 rounded-xl">
            <div class="flex items-center gap-3">
              <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                </svg>
              </div>
              <div>
                <p class="text-sm font-semibold text-slate-900 dark:text-white">Living Room</p>
                <p class="text-xs text-slate-500">Lights at 75%</p>
              </div>
            </div>
            <div class="w-10 h-6 bg-indigo-600 rounded-full relative">
              <div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
            </div>
          </div>
          <div class="flex items-center justify-between p-4 bg-white dark:bg-neutral-800 rounded-xl">
            <div class="flex items-center gap-3">
              <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 4v10.54a4 4 0 11-4 0V4a2 2 0 014 0z"/>
                </svg>
              </div>
              <div>
                <p class="text-sm font-semibold text-slate-900 dark:text-white">Temperature</p>
                <p class="text-xs text-slate-500">22°C Optimal</p>
              </div>
            </div>
            <span class="text-indigo-600 dark:text-indigo-400 font-semibold">22°</span>
          </div>
        </div>
      </div>
      <div data-motion="image" class="lg:col-span-2 rounded-3xl overflow-hidden aspect-video">
        <img data-motion="image" src="https://images.unsplash.com/photo-1681249537103-9e0c7316d91e?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxwbHVtYmluZyUyMHJlcGFpciUyMGhvbWUlMjBwbHVtYmVyfGVufDF8MHx8fDE3NjkzMTk1OTJ8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Smart home interior" class="w-full h-full object-cover">
      </div>
      <div data-motion="card" class="p-6 bg-indigo-600 dark:bg-indigo-700 rounded-3xl text-white flex flex-col justify-center">
        <span class="text-5xl font-bold block mb-2">50%</span>
        <span class="text-indigo-100">Energy Savings</span>
        <p class="text-indigo-200 text-sm mt-4">Average reduction in energy costs with smart automation</p>
      </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.