Component:
Header Travel Light
Colors:
Description:
This carefully crafted Header component is perfect for Travel landing pages, featuring a Light design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Header
@industry: Travel
@style: Light
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->
<style>
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-slideDown {
animation: slideDown 0.6s ease-out forwards;
}
.animate-fadeIn {
animation: fadeIn 0.5s ease-out forwards;
}
.nav-item {
position: relative;
transition: all 0.3s ease;
}
.nav-item::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 50%;
background: linear-gradient(90deg, #ef4444);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-item:hover::after {
width: 100%;
}
.mobile-menu {
transform: translateX(100%);
transition: all 0.3s ease-in-out;
visibility: hidden;
}
.mobile-menu.open {
transform: translateX(0);
visibility: visible;
}
.hamburger span {
display: block;
height: 3px;
width: 25px;
background: #374151;
margin: 5px 0;
transition: 0.3s;
transform-origin: center;
}
.hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
</style>
<header class="bg-gradient-to-br from-emerald-50 via-white to-emerald-50 relative z-50">
<!-- Top Bar (Optional - Contact Info) -->
<div class="bg-gradient-to-r from-emerald-100 to-red-50 border-b border-emerald-200/50 animate-slideDown">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-10 text-sm">
<div class="hidden md:flex items-center space-x-6 text-gray-600">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-emerald-600" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
</svg>
[email protected]
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-emerald-600" fill="currentColor" viewBox="0 0 24 24">
<path
d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
</svg>
+1 (555) 123-4567
</div>
</div>
<div class="flex items-center space-x-4 text-gray-600">
<span class="hidden sm:inline text-xs">Follow us:</span>
<div class="flex space-x-3">
<a href="#" class="hover:text-emerald-600 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg>
</a>
<a href="#" class="hover:text-emerald-600 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Main Navigation -->
<nav class="bg-white border-b border-gray-200/50 shadow-sm animate-fadeIn">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo -->
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<div class="flex items-center space-x-3">
<!-- Logo Icon -->
<div class="w-10 h-10 bg-emerald-500 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
</svg>
</div>
<!-- Logo Text -->
<div>
<p class="text-2xl font-bold text-emerald-500">
TravelCo
</p>
<p class="text-xs text-gray-500 -mt-1">Explore • Dream • Discover</p>
</div>
</div>
</div>
</div>
<!-- Desktop Navigation -->
<div class="hidden lg:flex items-center space-x-8">
<a href="#" class="nav-item text-gray-700 hover:text-red-600 font-medium px-3 py-2">Home</a>
<div class="relative group">
<button class="nav-item text-gray-700 hover:text-red-600 font-medium px-3 py-2 flex items-center">
Destinations
<svg class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<!-- Dropdown -->
<div
class="absolute top-full left-0 mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
<div class="py-2">
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">Europe</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">Asia</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">Americas</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">Africa</a>
</div>
</div>
</div>
<a href="#" class="nav-item text-gray-700 hover:text-red-600 font-medium px-3 py-2">Tours</a>
<a href="#" class="nav-item text-gray-700 hover:text-red-600 font-medium px-3 py-2">Hotels</a>
<a href="#" class="nav-item text-gray-700 hover:text-red-600 font-medium px-3 py-2">About</a>
<a href="#" class="nav-item text-gray-700 hover:text-red-600 font-medium px-3 py-2">Contact</a>
</div>
<!-- Right Side - CTA & Search -->
<div class="hidden lg:flex items-center space-x-4">
<!-- Search -->
<div class="relative">
<button
class="p-2 text-gray-600 hover:text-emerald-600 hover:bg-emerald-50 rounded-full transition-all duration-300">
<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"></path>
</svg>
</button>
</div>
<!-- Account -->
<div class="relative">
<button
class="p-2 text-gray-600 hover:text-emerald-600 hover:bg-emerald-50 rounded-full transition-all duration-300">
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</button>
</div>
<!-- Book Now Button -->
<button class="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-semibold px-6 py-3 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
Book Now
</button>
</div>
<!-- Mobile Menu Button -->
<div class="lg:hidden">
<button id="mobile-menu-btn" class="hamburger p-2 text-gray-600 hover:text-emerald-600 focus:outline-none">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu"
class="mobile-menu lg:hidden fixed top-0 bottom-0 right-0 w-[280px] min-h-max bg-white shadow-2xl z-[9999] overflow-y-auto transform transition-transform duration-300">
<div class="p-6">
<!-- Mobile Menu Header -->
<div class="flex items-center justify-between mb-8">
<div class="flex items-center space-x-3">
<div
class="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center shadow-md">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
</svg>
</div>
<span
class="text-xl font-bold text-emerald-500">TravelCo</span>
</div>
<button id="close-mobile-menu" class="p-2 text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Mobile Navigation Links -->
<nav class="space-y-4">
<a href="#"
class="block py-3 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-lg font-medium transition-colors">Home</a>
<a href="#"
class="block py-3 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-lg font-medium transition-colors">Destinations</a>
<a href="#"
class="block py-3 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-lg font-medium transition-colors">Tours</a>
<a href="#"
class="block py-3 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-lg font-medium transition-colors">Hotels</a>
<a href="#"
class="block py-3 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-lg font-medium transition-colors">About</a>
<a href="#"
class="block py-3 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-lg font-medium transition-colors">Contact</a>
</nav>
<!-- Mobile CTA -->
<div class="mt-8 space-y-3">
<button class="w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-semibold px-6 py-3 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
Book Now
</button>
<div class="flex justify-center space-x-4 pt-4">
<button class="p-3 text-gray-600 hover:text-emerald-600 hover:bg-emerald-50 rounded-full">
<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"></path>
</svg>
</button>
<button class="p-3 text-gray-600 hover:text-emerald-600 hover:bg-emerald-50 rounded-full">
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Mobile Menu Overlay -->
<div id="mobile-overlay"
class="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-[9998] opacity-0 invisible transition-all duration-300">
</div>
</nav>
</header>
<script>
// Mobile menu functionality
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const closeMobileMenu = document.getElementById('close-mobile-menu');
const mobileMenu = document.getElementById('mobile-menu');
const mobileOverlay = document.getElementById('mobile-overlay');
function openMobileMenu() {
mobileMenu.classList.add('open');
mobileOverlay.classList.remove('opacity-0', 'invisible');
mobileOverlay.classList.add('opacity-100', 'visible');
mobileMenuBtn.classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeMobileMenuHandler() {
mobileMenu.classList.remove('open');
mobileOverlay.classList.add('opacity-0', 'invisible');
mobileOverlay.classList.remove('opacity-100', 'visible');
mobileMenuBtn.classList.remove('open');
document.body.style.overflow = '';
}
mobileMenuBtn.addEventListener('click', openMobileMenu);
closeMobileMenu.addEventListener('click', closeMobileMenuHandler);
mobileOverlay.addEventListener('click', closeMobileMenuHandler);
// Close mobile menu on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && mobileMenu.classList.contains('open')) {
closeMobileMenuHandler();
}
});
// Add scroll effect to header
window.addEventListener('scroll', () => {
const header = document.querySelector('nav');
if (window.scrollY > 10) {
header.classList.add('shadow-lg');
header.classList.remove('shadow-sm');
} else {
header.classList.remove('shadow-lg');
header.classList.add('shadow-sm');
}
});
</script> This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page