Electrician 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_property_investment_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="relative rounded-3xl overflow-hidden">
      <div data-motion="image" class="w-full h-[500px] lg:h-[600px]">
        <img data-motion="image" src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&auto=format&fit=crop&q=80" alt="Modern office space" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-linear-to-r from-slate-900/90 via-slate-900/60 to-transparent"></div>
      </div>
      <div class="absolute inset-0 flex items-center">
        <div data-motion="hero" class="max-w-xl px-8 lg:px-12 space-y-6">
          <span data-motion="badge" class="inline-flex items-center gap-2 text-indigo-400 text-sm font-semibold tracking-wide uppercase">
            <span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
            Premium Workspace
          </span>
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-[1.1]">
            <span data-animate="heading">Downtown</span>
            <span data-animate="heading" class="text-indigo-400"> Office</span>
            <span data-animate="heading"> Spaces</span>
          </h1>
          <p data-animate="text" class="text-lg text-white/80">
            Modern office spaces designed for ambitious teams. Prime location, flexible terms, and amenities that inspire productivity.
          </p>
          <div class="flex flex-wrap gap-4 pt-2">
            <a data-motion="button" href="#" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-full transition-colors">
              Schedule a Tour
              <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-white font-semibold hover:gap-3 transition-all duration-300">
              View Listings
              <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="absolute bottom-0 left-0 right-0 bg-white/10 backdrop-blur-md border-t border-white/20">
        <div class="grid grid-cols-3 divide-x divide-white/20">
          <div data-motion="card" class="py-4 px-6 text-center">
            <span class="text-2xl font-bold text-white block">50+</span>
            <span class="text-white/70 text-sm">Available Spaces</span>
          </div>
          <div data-motion="card" class="py-4 px-6 text-center">
            <span class="text-2xl font-bold text-indigo-400 block">200+</span>
            <span class="text-white/70 text-sm">Happy Tenants</span>
          </div>
          <div data-motion="card" class="py-4 px-6 text-center">
            <span class="text-2xl font-bold text-white block">4.9</span>
            <span class="text-white/70 text-sm">Rating</span>
          </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.