Corporate Travel 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_flight_booking_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="flex flex-col gap-16">
      <div class="text-center max-w-3xl mx-auto" 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>
          Travel Platform
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">
          <span data-animate="heading">Seamless</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Travel</span>
          <span data-animate="heading"> Experiences</span>
        </h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          From booking to boarding, we simplify every step of your journey. Discover destinations, compare flights, and travel with confidence.
        </p>
        <div class="flex flex-wrap items-center justify-center 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">
            Book Your Flight
          </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">
            Explore Destinations
            <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 class="grid lg:grid-cols-3 gap-5">
        <div class="lg:col-span-2 rounded-3xl overflow-hidden" data-motion="image">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1000&auto=format&fit=crop&q=80"
            alt="Airplane wing view"
            class="w-full h-72 lg:h-80 object-cover"
          >
        </div>
        <div class="bg-indigo-50 dark:bg-indigo-950/30 rounded-3xl p-8 flex flex-col justify-center" data-motion="card">
          <span class="text-5xl font-bold text-indigo-600 dark:text-indigo-400 block mb-2">125K+</span>
          <span class="text-slate-600 dark:text-neutral-400 text-lg">Happy travelers worldwide</span>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <span class="text-3xl font-bold text-slate-900 dark:text-white block">12+</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Years Experience</span>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <span class="text-3xl font-bold text-slate-900 dark:text-white block">98%</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction Rate</span>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Destinations</span>
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-center gap-8" data-motion="social-proof">
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
          </svg>
          <span class="text-sm font-medium">Secure Booking</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span class="text-sm font-medium">Best Price Guarantee</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 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="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
          </svg>
          <span class="text-sm font-medium">24/7 Support</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <svg class="w-5 h-5 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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
          <span class="text-sm font-medium">Mobile App</span>
        </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.