Home
Maxim
Travel Landing Page: Australia

Travel Landing Page: Australia

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

Card Button Call to Action Hero Landing Page

Author Maxim

1.7k

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>

Related Examples