Component:
Footer Travel Light
Colors:
Description:
This carefully crafted Footer 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: Footer
@industry: Travel
@style: Light
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-fadeInUp {
animation: fadeInUp 0.8s ease-out forwards;
}
.animate-slideInLeft {
animation: slideInLeft 0.8s ease-out forwards;
}
.footer-link {
position: relative;
transition: all 0.3s ease;
}
.footer-link:after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background: #ef4444;
transition: width 0.3s ease;
}
.footer-link:hover:after {
width: 100%;
}
</style>
<footer class="bg-gradient-to-br from-emerald-50 via-gray-50 to-emerald-50 relative overflow-hidden">
<!-- Main Footer Content -->
<div class="relative z-10 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-5 gap-8 lg:gap-12">
<!-- Company Info -->
<div class="lg:col-span-2 animate-slideInLeft">
<!-- Logo -->
<div class="flex items-center space-x-3 mb-6">
<!-- 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>
<p class="text-gray-600 mb-6 leading-relaxed">
Your trusted travel companion for over 15 years. We help you create unforgettable memories with carefully
curated experiences and personalized service that exceeds expectations.
</p>
<!-- Contact Info -->
<div class="space-y-3 mb-6">
<div class="flex items-center text-gray-600">
<svg class="w-5 h-5 mr-3 text-emerald-600" 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>
123 Travel Street, Adventure City, AC 12345
</div>
<div class="flex items-center text-gray-600">
<svg class="w-5 h-5 mr-3 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 class="flex items-center text-gray-600">
<svg class="w-5 h-5 mr-3 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>
<!-- Social Media -->
<div>
<h4 class="font-semibold text-gray-900 mb-4">Follow Our Journey</h4>
<div class="flex space-x-4">
<a href="#"
class="social-icon w-10 h-10 bg-red-100 hover:bg-red-200 text-red-600 rounded-full flex items-center justify-center">
<svg class="w-5 h-5" 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="social-icon w-10 h-10 bg-red-100 hover:bg-red-200 text-red-600 rounded-full flex items-center justify-center">
<svg class="w-5 h-5" 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>
<!-- Quick Links -->
<div class="animate-fadeInUp">
<h4 class="font-semibold text-gray-900 mb-6">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">About Us</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Our Story</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Travel Guides</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Blog</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Careers</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Press</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Contact Us</a></li>
</ul>
</div>
<!-- Destinations -->
<div class="animate-fadeInUp">
<h4 class="font-semibold text-gray-900 mb-6">Top Destinations</h4>
<ul class="space-y-3">
<li><a href="#" class="footer-link text-gray-600 hover:text-red-500">Europe Tours</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-500">Asian Adventures</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-500">American Journeys</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-500">African Safaris</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-500">Ocean Cruises</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-500">Mountain Expeditions</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-500">City Breaks</a></li>
</ul>
</div>
<!-- Support & Legal -->
<div class="animate-fadeInUp">
<h4 class="font-semibold text-gray-900 mb-6">Support</h4>
<ul class="space-y-3 mb-8">
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Help Center</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Travel Insurance</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Booking Support</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">Emergency Contact</a></li>
<li><a href="#" class="footer-link text-gray-600 hover:text-red-600">COVID-19 Info</a></li>
</ul>
<!-- Trust Badges -->
<div class="space-y-3">
<div class="flex items-center p-3 bg-white/60 rounded-xl border border-emerald-100">
<div class="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center mr-3">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<div class="text-xs font-semibold text-gray-900">IATA Certified</div>
<div class="text-xs text-gray-500">Verified Agency</div>
</div>
</div>
<div class="flex items-center p-3 bg-white/60 rounded-xl border border-red-100">
<div class="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center mr-3">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path
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>
<div class="text-xs font-semibold text-gray-900">SSL Secured</div>
<div class="text-xs text-gray-500">Safe & Secure</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="relative z-10 border-t border-white/50 bg-white/30 backdrop-blur-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div
class="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 animate-fadeInUp">
<!-- Copyright -->
<div class="text-center lg:text-left">
<p class="text-gray-600 text-sm">
© 2025 TravelCo. All rights reserved. Made with
<span class="text-red-500">❤</span> for travelers worldwide.
</p>
</div>
<!-- Legal Links -->
<div class="flex flex-wrap justify-center lg:justify-end space-x-6 text-sm">
<a href="#" class="footer-link text-gray-600 hover:text-red-600">Privacy Policy</a>
<a href="#" class="footer-link text-gray-600 hover:text-red-600">Terms of Service</a>
<a href="#" class="footer-link text-gray-600 hover:text-red-600">Cookie Policy</a>
<a href="#" class="footer-link text-gray-600 hover:text-red-600">Refund Policy</a>
</div>
<!-- Payment Methods -->
<div class="flex items-center space-x-3">
<span class="text-sm text-gray-600 mr-2">We accept:</span>
<div class="flex space-x-2">
<!-- Visa -->
<div class="w-8 h-5 bg-white rounded border border-gray-200 flex items-center justify-center">
<span class="text-xs font-bold text-blue-600">VISA</span>
</div>
<!-- Mastercard -->
<div class="w-8 h-5 bg-white rounded border border-gray-200 flex items-center justify-center">
<div class="w-3 h-3 bg-red-500 rounded-full opacity-80"></div>
</div>
<!-- PayPal -->
<div class="w-8 h-5 bg-blue-600 rounded flex items-center justify-center">
<span class="text-xs font-bold text-white">PP</span>
</div>
<!-- Apple Pay -->
<div class="w-8 h-5 bg-black rounded flex items-center justify-center">
<svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
<path
d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</footer> 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