Demolition Contractor 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_consulting_firm_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-12 gap-8 lg:gap-12 items-center">
      <div class="lg:col-span-5" 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">Business Consulting</span>
        <h1 class="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white leading-tight mb-6"><span data-animate="heading">Demolition Done Right</span></h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Partner with industry experts to unlock growth opportunities, optimize operations, and achieve sustainable success.
        </p>
        <div class="flex flex-wrap gap-4 mb-10">
          <a href="#" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
            Schedule Consultation
          </a>
          <a href="#" data-motion="button" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300">
            Learn More
            <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 class="grid grid-cols-3 gap-6" data-motion="stats">
          <div>
            <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 block">340%</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Avg. ROI</span>
          </div>
          <div>
            <span class="text-2xl font-bold text-slate-900 dark:text-white block">500+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Clients</span>
          </div>
          <div>
            <span class="text-2xl font-bold text-slate-900 dark:text-white block">15+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Years</span>
          </div>
        </div>
      </div>
      <div class="lg:col-span-7">
        <div class="relative" data-motion="image">
          <div class="rounded-3xl overflow-hidden">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1567238563567-b99d8ac66e9b?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMHByb2Zlc3Npb25hbCUyMG1vZGVybiUyMGRlbW9saXRpb24lMjBjb250cmFjdG9yfGVufDF8MHx8fDE3NjkzMjAzMzJ8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Business consulting meeting with team"
              class="w-full h-[400px] lg:h-[500px] object-cover"
            >
          </div>
          <div data-motion="card" class="absolute bottom-6 left-6 right-6 p-5 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-xs rounded-2xl">
            <p class="text-slate-700 dark:text-neutral-300 mb-4 italic">"Working with this team transformed our entire approach to growth and profitability."</p>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-3">
                <img data-motion="avatar"
                  src="https://images.unsplash.com/photo-1636121195200-49bdb334c79d?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxidXNpbmVzcyUyMHByb2Zlc3Npb25hbCUyMG1vZGVybiUyMGRlbW9saXRpb24lMjBjb250cmFjdG9yfGVufDF8MHx8fDE3NjkzMjAzMzJ8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
                  alt="Client testimonial"
                  class="w-10 h-10 rounded-full object-cover"
                >
                <div>
                  <span class="text-slate-900 dark:text-white font-semibold block text-sm">Michael Chen</span>
                  <span class="text-slate-500 dark:text-neutral-400 text-xs">CEO, TechVentures</span>
                </div>
              </div>
              <a href="#" class="w-12 h-12 rounded-full bg-indigo-600 hover:bg-indigo-700 transition-colors flex items-center justify-center">
                <svg class="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
                  <polygon points="5 3 19 12 5 21 5 3"/>
                </svg>
              </a>
            </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.