Luxury Car Dealer 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_brand_marquee_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
  <style>
    @keyframes marquee-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    #_hero_brand_marquee_v6_001 .marquee-container {
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
    #_hero_brand_marquee_v6_001 .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-left 30s linear infinite;
    }
    #_hero_brand_marquee_v6_001 .marquee-track:hover {
      animation-play-state: paused;
    }
  </style>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-12 items-center mb-16">
      <div data-motion="hero">
        <span data-motion="badge" class="inline-flex items-center gap-2 px-4 py-1.5 bg-indigo-100 dark:bg-indigo-900/40 rounded-full text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-6">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Trusted by Industry Leaders
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight"><span data-animate="heading">Luxury Cars For Discerning Buyers</span></h1>
      </div>
      <div data-motion="text">
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Join thousands of companies using our platform to streamline operations, boost productivity, and achieve remarkable results.
        </p>
        <div class="flex flex-wrap gap-4">
          <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">
            Start Free Trial
          </a>
          <a href="#" data-motion="button" class="px-6 py-3 bg-slate-100 dark:bg-neutral-800 hover:bg-slate-200 dark:hover:bg-neutral-700 transition-colors rounded-full text-slate-900 dark:text-white font-semibold">
            View Case Studies
          </a>
        </div>
      </div>
    </div>
    <div data-motion="marquee" class="marquee-container py-10 mb-12">
      <div class="marquee-track">
        <div class="flex items-center gap-16 shrink-0">
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            <span class="text-xl font-semibold">TechFlow</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
            <span class="text-xl font-semibold">Orbita</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3h18v18H3V3zm2 2v14h14V5H5z"/></svg>
            <span class="text-xl font-semibold">Squarespace</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            <span class="text-xl font-semibold">Stellar</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            <span class="text-xl font-semibold">Verified</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
            <span class="text-xl font-semibold">DocuSign</span>
          </div>
        </div>
        <div class="flex items-center gap-16 shrink-0">
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            <span class="text-xl font-semibold">TechFlow</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
            <span class="text-xl font-semibold">Orbita</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3h18v18H3V3zm2 2v14h14V5H5z"/></svg>
            <span class="text-xl font-semibold">Squarespace</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            <span class="text-xl font-semibold">Stellar</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            <span class="text-xl font-semibold">Verified</span>
          </div>
          <div class="flex items-center gap-3 text-slate-400 dark:text-neutral-500">
            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
            <span class="text-xl font-semibold">DocuSign</span>
          </div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      <div data-motion="card" class="bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl p-6 text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">10K+</span>
        <span class="text-slate-600 dark:text-neutral-400 text-sm">Active Users</span>
      </div>
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">99.9%</span>
        <span class="text-slate-600 dark:text-neutral-400 text-sm">Uptime</span>
      </div>
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">150+</span>
        <span class="text-slate-600 dark:text-neutral-400 text-sm">Countries</span>
      </div>
      <div data-motion="card" class="bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl p-6 text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">4.9★</span>
        <span class="text-slate-600 dark:text-neutral-400 text-sm">User Rating</span>
      </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.