Travel Landing Page: Australia

This tailwind example is contributed by Maxim, on 20-Mar-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner,Front page

Card Button Call to Action Hero Landing Page

Author Maxim

Tailwind v3.4 2.9k 8

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aussie Adventures - Explore the Land Down Under</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.3/cdn.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

body {
            font-family: 'Montserrat', sans-serif;
        }

.cursive-text {
            font-family: 'Brush Script MT', cursive;
        }
    </style>
</head>

<nav class="container mx-auto px-4 py-6 flex justify-between items-center relative z-20">
            
            <a href="#" class="text-white text-3xl font-bold z-20">
                <span class="text-yellow-300">aussie</span>adventures
            </a>

<div class="hidden md:flex space-x-10 text-white text-lg">
                <a href="#" class="hover:text-yellow-300 transition font-medium">Destinations</a>
                <a href="#" class="hover:text-yellow-300 transition font-medium">Tours</a>
                <div x-data="{ open: false }" class="relative">
                    <button @click="open = !open" class="hover:text-yellow-300 transition flex items-center font-medium">
                        Experiences
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                    <div x-show="open" x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 transform -translate-y-2"
                        x-transition:enter-end="opacity-100 transform translate-y-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 transform translate-y-0"
                        x-transition:leave-end="opacity-0 transform -translate-y-2" @click.away="open = false"
                        class="absolute mt-2 w-64 bg-white text-gray-800 rounded-lg shadow-lg py-3 z-50">
                        <a href="#" class="block px-6 py-3 text-base hover:bg-gray-100">Great Barrier Reef</a>
                        <a href="#" class="block px-6 py-3 text-base hover:bg-gray-100">Outback Adventures</a>
                        <a href="#" class="block px-6 py-3 text-base hover:bg-gray-100">Wine Tasting</a>
                    </div>
                </div>
                <div x-data="{ open: false }" class="relative">
                    <button @click="open = !open" class="hover:text-yellow-300 transition flex items-center font-medium">
                        Info
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                    <div x-show="open" x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 transform -translate-y-2"
                        x-transition:enter-end="opacity-100 transform translate-y-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 transform translate-y-0"
                        x-transition:leave-end="opacity-0 transform -translate-y-2" @click.away="open = false"
                        class="absolute mt-2 w-64 bg-white text-gray-800 rounded-lg shadow-lg py-3 z-50">
                        <a href="#" class="block px-6 py-3 text-base hover:bg-gray-100">Visa Requirements</a>
                        <a href="#" class="block px-6 py-3 text-base hover:bg-gray-100">Weather Guide</a>
                        <a href="#" class="block px-6 py-3 text-base hover:bg-gray-100">Travel Tips</a>
                    </div>
                </div>
                <a href="#" class="hover:text-yellow-300 transition font-medium">Gallery</a>
                <a href="#" class="hover:text-yellow-300 transition font-medium">Blog</a>
            </div>

<a href="#"
                class="hidden md:block bg-yellow-500 hover:bg-yellow-600 text-blue-900 px-8 py-3 rounded-full transition font-medium text-lg">Book
                Now</a>

<button @click="mobileMenuOpen = !mobileMenuOpen"
                    class="md:hidden text-white z-40 p-2 fixed top-6 right-4 focus:outline-none"
                    aria-label="Toggle menu">
                <div class="w-8 h-8 relative flex justify-center items-center">
                    
                    <span class="absolute h-1 w-8 bg-white rounded-full transform transition-all duration-300"
                          :class="mobileMenuOpen ? 'rotate-45 translate-y-0' : '-translate-y-2'"></span>
                    
                    
                    <span class="absolute h-1 w-8 bg-white rounded-full transition-all duration-300"
                          :class="mobileMenuOpen ? 'opacity-0' : 'opacity-100'"></span>
                    
                    
                    <span class="absolute h-1 w-8 bg-white rounded-full transform transition-all duration-300"
                          :class="mobileMenuOpen ? '-rotate-45 translate-y-0' : 'translate-y-2'"></span>
                </div>
            </button>

<div x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 transform scale-95"
                x-transition:enter-end="opacity-100 transform scale-100"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 transform scale-100"
                x-transition:leave-end="opacity-0 transform scale-95"
                class="md:hidden fixed inset-0 bg-blue-900 bg-opacity-95 flex flex-col items-center justify-center z-30">

<div
                    class="flex flex-col space-y-2 text-white text-2xl text-center w-full px-6 max-h-screen overflow-y-auto py-12">
                    <a href="#" @click="mobileMenuOpen = false"
                        class="py-4 hover:text-yellow-300 transition border-b border-blue-800">Destinations</a>
                    <a href="#" @click="mobileMenuOpen = false"
                        class="py-4 hover:text-yellow-300 transition border-b border-blue-800">Tours</a>

<div x-data="{ submenuOpen: false }" class="border-b border-blue-800">
                        <button @click="submenuOpen = !submenuOpen" class="py-4 w-full text-left flex items-center justify-between hover:text-yellow-300 transition">
                            <span>Experiences</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition-transform" :class="submenuOpen ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="submenuOpen" x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 transform translate-y-0"
                            x-transition:leave-end="opacity-0 transform -translate-y-2"
                            class="bg-blue-800 rounded-lg py-3 my-2">
                            <a href="#" @click="mobileMenuOpen = false"
                                class="block py-3 px-4 text-lg hover:text-yellow-300 transition">Great Barrier Reef</a>
                            <a href="#" @click="mobileMenuOpen = false"
                                class="block py-3 px-4 text-lg hover:text-yellow-300 transition">Outback Adventures</a>
                            <a href="#" @click="mobileMenuOpen = false"
                                class="block py-3 px-4 text-lg hover:text-yellow-300 transition">Wine Tasting</a>
                        </div>
                    </div>

<div x-data="{ submenuOpen: false }" class="border-b border-blue-800">
                        <button @click="submenuOpen = !submenuOpen" class="py-4 w-full text-left flex items-center justify-between hover:text-yellow-300 transition">
                            <span>Travel Info</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition-transform" :class="submenuOpen ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="submenuOpen" x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 transform translate-y-0"
                            x-transition:leave-end="opacity-0 transform -translate-y-2"
                            class="bg-blue-800 rounded-lg py-3 my-2">
                            <a href="#" @click="mobileMenuOpen = false"
                                class="block py-3 px-4 text-lg hover:text-yellow-300 transition">Visa Requirements</a>
                            <a href="#" @click="mobileMenuOpen = false"
                                class="block py-3 px-4 text-lg hover:text-yellow-300 transition">Weather Guide</a>
                            <a href="#" @click="mobileMenuOpen = false"
                                class="block py-3 px-4 text-lg hover:text-yellow-300 transition">Travel Tips</a>
                        </div>
                    </div>

<a href="#" @click="mobileMenuOpen = false"
                        class="py-4 hover:text-yellow-300 transition border-b border-blue-800">Gallery</a>
                    <a href="#" @click="mobileMenuOpen = false"
                        class="py-4 hover:text-yellow-300 transition border-b border-blue-800">Travel Blog</a>
                    <a href="#" @click="mobileMenuOpen = false"
                        class="bg-yellow-500 text-blue-900 font-bold text-xl px-8 py-4 rounded-full transition mt-6 w-64 mx-auto">Book
                        Now</a>
                </div>
            </div>
        </nav>

<div
            class="relative container mx-auto px-4 flex items-center justify-start h-full min-h-72 md:min-h-screen z-10">
            <div class="max-w-2xl text-white mt-16 md:mt-0 md:pt-20 lg:pt-0">
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-4">
                    Discover the magic<br>of Australia
                </h1>
                <p class="text-xl md:text-2xl mb-8">Where adventure meets wonder in the land down under.</p>
                <a href="#"
                    class="inline-block bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold px-8 py-4 rounded-full transition text-lg">Start
                    Your Journey</a>
            </div>
        </div>

<div class="absolute bottom-10 md:bottom-16 left-4 md:left-8 lg:left-16 z-0">
            <div class="cursive-text text-yellow-300 text-3xl md:text-5xl lg:text-6xl opacity-80">
                adventure<br>awaits<br>you
            </div>
        </div>
    </header>

<section class="py-16 md:py-24">
        <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row items-center gap-12">
                
                <div class="w-full lg:w-1/2">
                    <h2 class="text-3xl md:text-5xl font-bold text-gray-800 mb-8">Explore the wonders of Australia</h2>
                    <p class="text-lg text-gray-600 mb-8">
                        From the iconic Sydney Opera House to the breathtaking Great Barrier Reef, Australia offers
                        unforgettable experiences for every traveler. Plan your perfect Australian adventure with our
                        expert guides.
                    </p>
                    <ul class="space-y-6 mb-8">
                        <li class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-full bg-yellow-200 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600"
                                    viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <span class="text-gray-700">Iconic cities & landmarks</span>
                        </li>
                        <li class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-full bg-yellow-200 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600"
                                    viewBox="0 0 20 20" fill="currentColor">
                                    <path
                                        d="M13.24 7.289l-5.942 5.942a1.5 1.5 0 01-2.121 0l-2.121-2.121a1.5 1.5 0 012.121-2.121l1.061 1.061 4.882-4.882a1.5 1.5 0 012.121 2.121z" />
                                </svg>
                            </div>
                            <span class="text-gray-700">Natural wonders & wildlife</span>
                        </li>
                        <li class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-full bg-yellow-200 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600"
                                    viewBox="0 0 20 20" fill="currentColor">
                                    <path
                                        d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                                </svg>
                            </div>
                            <span class="text-gray-700">Cultural experiences & local cuisine</span>
                        </li>
                    </ul>
                    <a href="#"
                        class="inline-block border-2 border-gray-800 text-gray-800 hover:bg-gray-800 hover:text-white px-8 py-3 rounded-full transition duration-300">
                        View Destinations
                    </a>
                </div>

<div class="w-full lg:w-1/2 relative">
                    <div class="relative z-10">
                        <img src="https://images.pexels.com/photos/995765/pexels-photo-995765.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Sydney Opera House" class="w-full rounded-lg shadow-xl">
                    </div>

<div class="absolute -right-4 -bottom-8 -z-10">
                        <div class="grid grid-cols-6 gap-2">
                            <div class="h-16 w-3 bg-blue-300 rounded-full"></div>
                            <div class="h-8 w-3 bg-green-500 rounded-full"></div>
                            <div class="h-12 w-3 bg-red-500 rounded-full"></div>
                            <div class="h-16 w-3 bg-yellow-500 rounded-full"></div>
                            <div class="h-10 w-3 bg-blue-500 rounded-full"></div>
                            <div class="h-6 w-3 bg-yellow-600 rounded-full"></div>

<section class="py-16 bg-blue-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-5xl font-bold text-gray-800 mb-4">Plan Your Australian Adventure</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Follow these simple steps to create your perfect trip
                    to the land down under.</p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="bg-white p-8 rounded-lg shadow-lg text-center relative">
                    <div
                        class="w-16 h-16 bg-yellow-500 text-blue-900 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                        1</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Choose Your Destinations</h3>
                    <p class="text-gray-600">Select from our curated list of must-see Australian locations and
                        attractions.</p>
                </div>

<div class="bg-white p-8 rounded-lg shadow-lg text-center relative">
                    <div
                        class="w-16 h-16 bg-yellow-500 text-blue-900 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                        2</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Customize Your Experience</h3>
                    <p class="text-gray-600">Tailor your trip with experiences that match your interests and travel
                        style.</p>
                </div>

<div class="bg-white p-8 rounded-lg shadow-lg text-center relative">
                    <div
                        class="w-16 h-16 bg-yellow-500 text-blue-900 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                        3</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Book With Confidence</h3>
                    <p class="text-gray-600">Secure your adventure with our flexible booking options and price
                        guarantee.</p>
                </div>

<div class="bg-white p-8 rounded-lg shadow-lg text-center relative">
                    <div
                        class="w-16 h-16 bg-yellow-500 text-blue-900 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                        4</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Enjoy Australia</h3>
                    <p class="text-gray-600">Relax and enjoy your trip with 24/7 support from our local Australian
                        experts.</p>
                </div>
            </div>
        </div>
    </section>

<section class="py-16">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-5xl font-bold text-gray-800 mb-4">Compare Our Popular Tours</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Find the perfect Australian experience for your
                    travel style and budget.</p>
            </div>

<div class="overflow-x-auto">
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="bg-blue-900 text-white">
                            <th class="p-4 text-left">Tour Package</th>
                            <th class="p-4 text-center">Duration</th>
                            <th class="p-4 text-center">Destinations</th>
                            <th class="p-4 text-center">Activities</th>
                            <th class="p-4 text-center">Price</th>
                            <th class="p-4 text-center"></th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="p-4">
                                <div class="font-bold text-lg">Coastal Explorer</div>
                                <div class="text-gray-600">Sydney, Gold Coast, Brisbane</div>
                            </td>
                            <td class="p-4 text-center">7 Days</td>
                            <td class="p-4 text-center">3 Cities</td>
                            <td class="p-4 text-center">Beach, City Tours, Wildlife</td>
                            <td class="p-4 text-center font-bold">$1,299</td>
                            <td class="p-4 text-center">
                                <a href="#"
                                    class="inline-block bg-yellow-500 hover:bg-yellow-600 text-blue-900 px-4 py-2 rounded-full text-sm font-medium">View
                                    Details</a>
                            </td>
                        </tr>
                        
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="p-4">
                                <div class="font-bold text-lg">Outback Adventure</div>
                                <div class="text-gray-600">Alice Springs, Uluru, Katherine</div>
                            </td>
                            <td class="p-4 text-center">10 Days</td>
                            <td class="p-4 text-center">5 Locations</td>
                            <td class="p-4 text-center">Hiking, Cultural, Star Gazing</td>
                            <td class="p-4 text-center font-bold">$2,199</td>
                            <td class="p-4 text-center">
                                <a href="#"
                                    class="inline-block bg-yellow-500 hover:bg-yellow-600 text-blue-900 px-4 py-2 rounded-full text-sm font-medium">View
                                    Details</a>
                            </td>
                        </tr>
                        
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="p-4">
                                <div class="font-bold text-lg">Reef & Rainforest</div>
                                <div class="text-gray-600">Cairns, Port Douglas, Daintree</div>
                            </td>
                            <td class="p-4 text-center">8 Days</td>
                            <td class="p-4 text-center">4 Locations</td>
                            <td class="p-4 text-center">Snorkeling, Hiking, Boat Tours</td>
                            <td class="p-4 text-center font-bold">$1,799</td>
                            <td class="p-4 text-center">
                                <a href="#"
                                    class="inline-block bg-yellow-500 hover:bg-yellow-600 text-blue-900 px-4 py-2 rounded-full text-sm font-medium">View
                                    Details</a>
                            </td>
                        </tr>
                        
                        <tr class="hover:bg-gray-50">
                            <td class="p-4">
                                <div class="font-bold text-lg">Complete Australia</div>
                                <div class="text-gray-600">Sydney, Melbourne, Uluru, Cairns</div>
                            </td>
                            <td class="p-4 text-center">14 Days</td>
                            <td class="p-4 text-center">7+ Locations</td>
                            <td class="p-4 text-center">All-inclusive Experience</td>
                            <td class="p-4 text-center font-bold">$3,499</td>
                            <td class="p-4 text-center">
                                <a href="#"
                                    class="inline-block bg-yellow-500 hover:bg-yellow-600 text-blue-900 px-4 py-2 rounded-full text-sm font-medium">View
                                    Details</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

<section class="py-16 bg-blue-900 text-white relative overflow-hidden">
        
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
            <img src="/api/placeholder/1920/600?text=Australia+Map+Outline" alt="" class="w-full h-full object-cover">
        </div>

<div class="container mx-auto px-4 relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready for the Adventure of a Lifetime?</h2>
                <p class="text-xl mb-8">Book your Australian journey today and save up to 20% on selected tours when you
                    book before June.</p>
                <a href="#"
                    class="inline-block bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold text-xl px-10 py-4 rounded-full transition">
                    Book Your Adventure Now
                </a>
                <p class="mt-6 text-blue-200">No booking fees • Free cancellation • Best price guarantee</p>
            </div>
        </div>
    </section>

<section class="py-16">
        <div class="container mx-auto px-4">
            <div class="max-w-5xl mx-auto">
                <div class="flex flex-col md:flex-row bg-white rounded-xl shadow-xl overflow-hidden">
                    
                    <div class="w-full p-8 lg:p-12">
                        <h2 class="text-3xl font-bold text-gray-800 mb-6">Get in Touch</h2>
                        <p class="text-gray-600 mb-8">Have questions about traveling to Australia? Our travel experts
                            are here to help. Fill out the form below and we'll get back to you shortly.</p>

<div class="mb-6">
                                <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
                                <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your email" required>
                            </div>

<div class="mb-6">
                                <label for="interest" class="block text-gray-700 font-medium mb-2">I'm interested in</label>
                                <select id="interest" name="interest" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="">Select your interest</option>
                                    <option value="coastal">Coastal Adventures</option>
                                    <option value="outback">Outback Experiences</option>
                                    <option value="reef">Great Barrier Reef</option>
                                    <option value="cities">City Explorations</option>
                                    <option value="custom">Custom Itinerary</option>
                                </select>
                            </div>

<div class="mb-6">
                                <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
                                <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Tell us what you're looking for"></textarea>
                            </div>

<button type="submit" class="w-full bg-blue-900 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-lg transition">
                                Send Message
                            </button>
                        </form>
                    </div>
                </div>

<div class="border-t border-gray-800 pt-8">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        
                        <div class="text-gray-500 text-sm mb-4 md:mb-0">
                            &copy; 2025 Aussie Adventures. All rights reserved.
                        </div>

<div class="flex flex-wrap justify-center md:justify-end space-x-4 text-sm">
                            <a href="#" class="text-gray-500 hover:text-yellow-300 mb-2 md:mb-0">Privacy Policy</a>
                            <a href="#" class="text-gray-500 hover:text-yellow-300 mb-2 md:mb-0">Terms of Service</a>
                            <a href="#" class="text-gray-500 hover:text-yellow-300 mb-2 md:mb-0">Cookie Policy</a>
                            <a href="#" class="text-gray-500 hover:text-yellow-300">Sitemap</a>
                        </div>
                    </div>
                </div>
            </div>
            </footer>

<button class="fixed bottom-4 left-4 bg-gray-900 text-white p-3 rounded-full z-50" aria-label="Accessibility Options">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
        </svg>
    </button>
</body>

</html>