Travel Agency 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_travel_booking_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950 relative overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col gap-12">
      <div class="relative rounded-3xl overflow-hidden h-[400px] sm:h-[500px]">
        <img data-motion="image" src="https://images.unsplash.com/photo-1650884230712-971a9a1f96fd?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMGFnZW5jeSUyMHRlYW0lMjB0cmF2ZWx8ZW58MXwwfHx8MTc2OTMyMDQyMHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Tropical beach paradise" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-linear-to-t from-slate-900/80 via-slate-900/30 to-transparent"></div>
        <div data-motion="card" class="absolute bottom-6 left-6 right-6 sm:left-8 sm:right-8 lg:left-12 lg:right-12 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-xs p-6 rounded-2xl">
          <div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-4 items-end">
            <div>
              <label class="block text-xs font-medium text-slate-500 dark:text-neutral-400 mb-1.5 uppercase tracking-wide">Destination</label>
              <input data-motion="input" type="text" placeholder="Where to?" class="w-full px-4 py-3 bg-slate-50 dark:bg-neutral-800 border-0 rounded-xl text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-indigo-500 transition-all">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-500 dark:text-neutral-400 mb-1.5 uppercase tracking-wide">Check In</label>
              <input data-motion="input" type="date" title="Check in date" class="w-full px-4 py-3 bg-slate-50 dark:bg-neutral-800 border-0 rounded-xl text-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 transition-all">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-500 dark:text-neutral-400 mb-1.5 uppercase tracking-wide">Check Out</label>
              <input data-motion="input" type="date" title="Check out date" class="w-full px-4 py-3 bg-slate-50 dark:bg-neutral-800 border-0 rounded-xl text-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 transition-all">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-500 dark:text-neutral-400 mb-1.5 uppercase tracking-wide">Guests</label>
              <select data-motion="input" class="w-full px-4 py-3 bg-slate-50 dark:bg-neutral-800 border-0 rounded-xl text-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 transition-all">
                <option>1 Guest</option>
                <option>2 Guests</option>
                <option>3 Guests</option>
                <option>4+ Guests</option>
              </select>
            </div>
            <div>
              <button data-motion="button" type="button" class="w-full px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl transition-colors flex items-center justify-center gap-2">
                <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                Search
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="grid lg:grid-cols-12 gap-10 lg:gap-16">
        <div data-motion="hero" class="lg:col-span-7 space-y-6">
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase">Explore the World</span>
          <h1 class="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white leading-tight">
            <span data-animate="heading">Your Next Adventure</span>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Awaits</span>
          </h1>
          <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 leading-relaxed">
            Discover handpicked destinations, exclusive deals, and seamless booking experiences. From tropical beaches to mountain retreats, we make travel planning effortless.
          </p>
          <div class="flex flex-wrap items-center gap-4 pt-2">
            <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300">
              View Popular 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="lg:col-span-5 space-y-8">
          <div data-motion="stats" class="grid grid-cols-3 gap-6">
            <div class="text-center">
              <span class="text-3xl font-bold text-slate-900 dark:text-white block">2M+</span>
              <span class="text-sm text-slate-500 dark:text-neutral-400">Happy Travelers</span>
            </div>
            <div class="text-center">
              <span class="text-3xl font-bold text-slate-900 dark:text-white block">150+</span>
              <span class="text-sm text-slate-500 dark:text-neutral-400">Destinations</span>
            </div>
            <div class="text-center">
              <span class="text-3xl font-bold text-slate-900 dark:text-white block">4.9</span>
              <span class="text-sm text-slate-500 dark:text-neutral-400">User Rating</span>
            </div>
          </div>
          <div data-motion="social-proof" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl">
            <div class="flex flex-col gap-4">
              <div class="flex items-center gap-3">
                <div data-motion="icon" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center">
                  <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>
                </div>
                <div>
                  <span class="text-slate-900 dark:text-white font-medium block">Secure Booking</span>
                  <span class="text-sm text-slate-500 dark:text-neutral-400">256-bit SSL encryption</span>
                </div>
              </div>
              <div class="flex items-center gap-3">
                <div data-motion="icon" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center">
                  <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                  </svg>
                </div>
                <div>
                  <span class="text-slate-900 dark:text-white font-medium block">Best Price Guarantee</span>
                  <span class="text-sm text-slate-500 dark:text-neutral-400">We match any lower price</span>
                </div>
              </div>
              <div class="flex items-center gap-3">
                <div data-motion="icon" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center">
                  <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>
                </div>
                <div>
                  <span class="text-slate-900 dark:text-white font-medium block">24/7 Support</span>
                  <span class="text-sm text-slate-500 dark:text-neutral-400">Always here to help</span>
                </div>
              </div>
            </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.