Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Transparent Navbar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100 min-h-[200vh]" x-data="{ scrolled: false }" @scroll.window="scrolled = (window.pageYOffset > 50)"> <nav :class="scrolled ? 'bg-white shadow-md py-4' : 'bg-transparent py-6'" class="fixed top-0 w-full transition-all duration-300 z-50 px-6 lg:px-12 flex justify-between items-center" > <div :class="scrolled ? 'text-gray-900' : 'text-white'" class="text-3xl font-black transition-colors">ZENITH</div> <div :class="scrolled ? 'text-gray-600' : 'text-white/80'" class="hidden md:flex space-x-12 font-bold uppercase text-xs tracking-widest transition-colors"> <a href="##" class="hover:text-blue-500">Adventures</a> <a href="##" class="hover:text-blue-500">Destinations</a> <a href="##" class="hover:text-blue-500">Pricing</a> </div> <button :class="scrolled ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'" class="px-6 py-2 rounded-full text-xs font-black uppercase transition-all shadow-xl hover:scale-105 active:scale-95">Explore</button> </nav> <!-- Hero Section with Background Image --> <section class="h-screen bg-cover bg-center flex items-center justify-center relative" style="background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80')"> <div class="absolute inset-0 bg-black/40"></div> <div class="relative z-10 text-center px-6"> <h1 class="text-6xl md:text-8xl font-black text-white mb-6 leading-none">THE GREAT OUTDOORS</h1> <p class="text-xl text-white/80 max-w-2xl mx-auto mb-10">Scroll down to see the navbar change from transparent to solid white.</p> </div> </section> <main class="max-w-4xl mx-auto py-20 px-6"> <h2 class="text-4xl font-black text-gray-900 mb-8">Adventure Awaits</h2> <p class="text-gray-500 text-lg leading-relaxed mb-6">This transparent navbar pattern is commonly used for landing pages with hero images. It creates an immersive experience while maintaining navigation accessibility after the user begins to explore the content.</p> <div class="h-96 bg-gray-200 rounded-3xl animate-pulse"></div> </main> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
