Used Auto Parts 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_business_growth_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">
      <div class="lg:col-span-5 flex flex-col justify-center">
        <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">Business Intelligence</span>
          <h1 class="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white leading-tight mb-6"><span data-animate="heading">Quality Parts For Less</span></h1>
          <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
            Transform data into actionable strategies. Make informed decisions that drive sustainable growth and competitive advantage.
          </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">
              Get Started Free
            </a>
            <a href="#" data-motion="button" class="inline-flex items-center gap-2 px-6 py-3 border border-slate-300 dark:border-neutral-700 hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors rounded-full text-slate-900 dark:text-white font-semibold">
              <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              Watch Demo
            </a>
          </div>
          <div class="flex flex-wrap gap-6" data-motion="badges">
            <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
              <svg class="w-5 h-5 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
              </svg>
              <span class="text-sm">Enterprise Security</span>
            </div>
            <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
              <svg class="w-5 h-5 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
              </svg>
              <span class="text-sm">99.9% Uptime</span>
            </div>
          </div>
        </div>
      </div>
      <div class="lg:col-span-7">
        <div class="relative" data-motion="image">
          <div class="rounded-3xl overflow-hidden bg-slate-100 dark:bg-neutral-900 p-3">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1686082307524-c89fb0bfadde?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjYXIlMjBhdXRvbW90aXZlJTIwZGVhbGVyc2hpcCUyMHVzZWQlMjBwYXJ0c3xlbnwxfDB8fHwxNzY5MzE5ODYxfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Business analytics dashboard showing growth metrics"
              class="w-full h-auto rounded-2xl"
            >
          </div>
          <div data-motion="card" class="absolute -bottom-4 left-4 bg-white dark:bg-neutral-800 rounded-2xl p-4 flex items-center gap-3 border border-slate-200 dark:border-neutral-700">
            <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center">
              <svg class="w-6 h-6 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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
              </svg>
            </div>
            <div>
              <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 block">+47%</span>
              <span class="text-slate-500 dark:text-neutral-400 text-xs">Revenue Growth</span>
            </div>
          </div>
          <div data-motion="card" class="absolute -bottom-4 right-4 bg-white dark:bg-neutral-800 rounded-2xl p-4 flex items-center gap-3 border border-slate-200 dark:border-neutral-700">
            <div data-motion="icon" class="w-12 h-12 bg-slate-100 dark:bg-neutral-700 rounded-xl flex items-center justify-center">
              <svg class="w-6 h-6 text-slate-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
              </svg>
            </div>
            <div>
              <span class="text-2xl font-bold text-slate-900 dark:text-white block">2.4K</span>
              <span class="text-slate-500 dark:text-neutral-400 text-xs">Active Users</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
    .carousel-track { display: flex; transition: transform 0.5s ease-out; }
  </style>

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.