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 Sticky Glass Navbar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-[200vh]"> <!-- Content for scrolling demonstration --> <div class="fixed inset-0 pointer-events-none"> <div class="absolute top-40 left-10 w-64 h-64 bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div> <div class="absolute top-20 right-20 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse delay-700"></div> </div> <nav class="sticky top-0 z-50 bg-white/60 backdrop-blur-xl border-b border-gray-100" x-data="{ open: false }"> <div class="max-w-7xl mx-auto px-6"> <div class="flex items-center justify-between h-20"> <!-- Logo --> <a href="##" class="flex items-center space-x-2"> <svg class="h-8 w-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /> </svg> <span class="text-xl font-black text-gray-900 tracking-tight">VISTA</span> </a> <!-- Desktop Menu --> <div class="hidden lg:flex items-center space-x-12"> <a href="##" class="text-sm font-bold text-gray-600 hover:text-blue-600 transition">Design</a> <a href="##" class="text-sm font-bold text-gray-600 hover:text-blue-600 transition">Engineering</a> <a href="##" class="text-sm font-bold text-gray-600 hover:text-blue-600 transition">Culture</a> <button class="bg-gray-900 text-white px-6 py-2.5 rounded-full text-sm font-bold shadow-xl shadow-gray-200 hover:bg-black transition">Get in touch</button> </div> <!-- Mobile Toggler --> <button @click="open = !open" class="lg:hidden p-2 text-gray-900"> <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="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> <!-- Mobile Navigation --> <div class="lg:hidden bg-white/95 backdrop-blur-md p-6 space-y-4 border-t border-gray-100 shadow-2xl" x-show="open" @click.away="open = false" style="display: none;"> <a href="##" class="block text-lg font-bold text-gray-800">Design</a> <a href="##" class="block text-lg font-bold text-gray-800">Engineering</a> <a href="##" class="block text-lg font-bold text-gray-800 border-b pb-4">Culture</a> <button class="block w-full bg-gray-900 text-white py-4 rounded-2xl font-bold">Get in touch</button> </div> </nav> <!-- Instructional Text --> <div class="max-w-2xl mx-auto mt-20 px-6 text-center"> <h1 class="text-4xl font-black text-gray-900 mb-6">Scroll down to see the transparency and blur effect in action.</h1> <p class="text-gray-500 text-lg">The background content will be visible through the navbar with a beautiful frosted glass effect as you move through the page.</p> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
