New Car Dealership 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_luxury_yacht_v6_001" class="relative min-h-screen">
  <div class="absolute inset-0">
    <img data-motion="image" src="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1920&auto=format&fit=crop&q=80" alt="Luxury yacht" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-linear-to-t from-slate-900/90 via-slate-900/40 to-slate-900/20"></div>
  </div>
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen flex flex-col justify-end pb-20">
    <div class="grid lg:grid-cols-2 gap-16 items-end">
      <div>
        <span data-motion="badge" class="text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-6 block">Charter Collection</span>
        <h1>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-8xl font-bold text-white leading-none tracking-tight">SAIL</span>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-8xl font-bold text-white leading-none tracking-tight mt-2">INTO</span>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-8xl font-bold text-indigo-400 leading-none tracking-tight mt-2">LUXURY</span>
        </h1>
        <p data-animate="text" class="mt-8 text-xl text-white/80 max-w-lg leading-relaxed">
          Experience the Mediterranean aboard our fleet of superyachts. Bespoke itineraries, world-class crew, and unparalleled service.
        </p>
        <div data-motion="button" class="flex flex-wrap gap-4 mt-10">
          <a data-motion="button" href="#" class="px-8 py-4 bg-indigo-500 hover:bg-indigo-400 text-white font-semibold rounded-full transition-colors">View Fleet</a>
          <a href="#" class="px-8 py-4 bg-white/10 backdrop-blur-xs text-white font-semibold rounded-full border border-white/30 hover:bg-white/20 transition-colors">Request Quote</a>
        </div>
      </div>
      <div data-motion="card" class="hidden lg:grid grid-cols-2 gap-4">
        <div class="p-6 bg-white/10 backdrop-blur-xl rounded-2xl border border-white/20">
          <span class="text-4xl font-bold text-white">50m+</span>
          <p class="text-white/70 text-sm mt-1">Yacht Length</p>
        </div>
        <div class="p-6 bg-white/10 backdrop-blur-xl rounded-2xl border border-white/20">
          <span class="text-4xl font-bold text-white">12</span>
          <p class="text-white/70 text-sm mt-1">Guest Capacity</p>
        </div>
        <div class="p-6 bg-white/10 backdrop-blur-xl rounded-2xl border border-white/20">
          <span class="text-4xl font-bold text-white">15</span>
          <p class="text-white/70 text-sm mt-1">Crew Members</p>
        </div>
        <div class="p-6 bg-white/10 backdrop-blur-xl rounded-2xl border border-white/20">
          <span class="text-4xl font-bold text-white">5★</span>
          <p class="text-white/70 text-sm mt-1">Service Rating</p>
        </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.