Luxury 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_destinations_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 items-start">
      <div class="lg:col-span-5 lg:sticky lg:top-24 space-y-8">
        <div data-motion="hero" class="space-y-6">
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase">Curated Escapes</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">Wander</span>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Beyond</span>
            <span data-animate="heading"> Borders</span>
          </h1>
          <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 leading-relaxed">
            Immerse yourself in extraordinary destinations. From ancient temples to pristine coastlines, discover places that inspire wonder and create lasting memories.
          </p>
          <div class="flex flex-wrap items-center gap-4 pt-4">
            <a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors">
              Explore All Destinations
            </a>
            <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-slate-900 dark:text-white font-semibold hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
              </svg>
              Watch Video
            </a>
          </div>
        </div>
        <div data-motion="stats" class="grid grid-cols-3 gap-6 pt-6">
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">50+</span>
            <span class="text-sm text-slate-500 dark:text-neutral-400">Countries</span>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">200+</span>
            <span class="text-sm text-slate-500 dark:text-neutral-400">Destinations</span>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">98%</span>
            <span class="text-sm text-slate-500 dark:text-neutral-400">Satisfaction</span>
          </div>
        </div>
      </div>
      <div class="lg:col-span-7">
        <div class="grid grid-cols-2 gap-4">
          <a href="#" data-motion="card" class="col-span-2 group relative rounded-3xl overflow-hidden h-72 sm:h-80">
            <img data-motion="image" src="https://images.unsplash.com/photo-1695124566076-9e510f268acf?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMGFnZW5jeSUyMHRlYW0lMjBsdXh1cnklMjB0cmF2ZWx8ZW58MXwwfHx8MTc2OTMyMDQyN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Santorini Greece" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
            <div class="absolute inset-0 bg-linear-to-t from-slate-900/80 via-slate-900/20 to-transparent"></div>
            <div class="absolute bottom-6 left-6 right-6">
              <span data-motion="badge" class="inline-block px-3 py-1 bg-indigo-500 text-white text-xs font-medium rounded-full mb-3">Featured</span>
              <h2 class="text-2xl sm:text-3xl font-bold text-white mb-1">Santorini, Greece</h2>
              <p class="text-white/80 text-sm">Iconic sunsets & whitewashed villages</p>
            </div>
          </a>
          <a href="#" data-motion="card" class="group relative rounded-2xl overflow-hidden h-56">
            <img data-motion="image" src="https://images.unsplash.com/photo-1764751024379-e8befc76db80?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMGFnZW5jeSUyMHRlYW0lMjBsdXh1cnklMjB0cmF2ZWx8ZW58MXwwfHx8MTc2OTMyMDQyN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Kyoto Japan" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
            <div class="absolute inset-0 bg-linear-to-t from-slate-900/70 to-transparent"></div>
            <div class="absolute bottom-4 left-4 right-4">
              <h3 class="text-xl font-bold text-white mb-1">Kyoto, Japan</h3>
              <p class="text-white/70 text-sm">Ancient temples & zen gardens</p>
            </div>
            <div data-motion="icon" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/20 backdrop-blur-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
              <svg class="w-5 h-5 text-white" 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>
            </div>
          </a>
          <a href="#" data-motion="card" class="group relative rounded-2xl overflow-hidden h-56">
            <img data-motion="image" src="https://images.unsplash.com/photo-1567864765359-7d6446405bc7?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMGFnZW5jeSUyMHRlYW0lMjBsdXh1cnklMjB0cmF2ZWx8ZW58MXwwfHx8MTc2OTMyMDQyN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Bali Indonesia" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
            <div class="absolute inset-0 bg-linear-to-t from-slate-900/70 to-transparent"></div>
            <div class="absolute bottom-4 left-4 right-4">
              <h3 class="text-xl font-bold text-white mb-1">Bali, Indonesia</h3>
              <p class="text-white/70 text-sm">Tropical paradise & rice terraces</p>
            </div>
            <div data-motion="icon" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/20 backdrop-blur-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
              <svg class="w-5 h-5 text-white" 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>
            </div>
          </a>
          <a href="#" data-motion="card" class="group relative rounded-2xl overflow-hidden h-44">
            <img data-motion="image" src="https://images.unsplash.com/photo-1531710093140-65d8174da3bc?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxjcmVhdGl2ZSUyMGFnZW5jeSUyMHRlYW0lMjBsdXh1cnklMjB0cmF2ZWx8ZW58MXwwfHx8MTc2OTMyMDQyN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Paris France" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
            <div class="absolute inset-0 bg-linear-to-t from-slate-900/70 to-transparent"></div>
            <div class="absolute bottom-4 left-4">
              <h3 class="text-lg font-bold text-white">Paris</h3>
              <p class="text-white/70 text-xs">France</p>
            </div>
          </a>
          <a href="#" data-motion="card" class="group relative rounded-2xl overflow-hidden h-44">
            <img data-motion="image" src="https://images.unsplash.com/photo-1604601600542-c751186db4a3?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxjcmVhdGl2ZSUyMGFnZW5jeSUyMHRlYW0lMjBsdXh1cnklMjB0cmF2ZWx8ZW58MXwwfHx8MTc2OTMyMDQyN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Maldives" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
            <div class="absolute inset-0 bg-linear-to-t from-slate-900/70 to-transparent"></div>
            <div class="absolute bottom-4 left-4">
              <h3 class="text-lg font-bold text-white">Maldives</h3>
              <p class="text-white/70 text-xs">Indian Ocean</p>
            </div>
          </a>
        </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.