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 Double Navbar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100"> <!-- Utility Bar (Top) --> <div class="bg-slate-900 text-slate-400 py-2.5 px-6 hidden sm:block"> <div class="max-w-7xl mx-auto flex justify-between items-center text-[11px] font-bold uppercase tracking-widest"> <div class="flex items-center space-x-6"> <span class="flex items-center"><svg class="h-3 w-3 mr-1.5 text-slate-500" fill="currentColor" viewBox="0 0 20 20"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/></svg> support@example.com</span> <span class="flex items-center"><svg class="h-3 w-3 mr-1.5 text-slate-500" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/></svg> +1 (555) 000-0000</span> </div> <div class="flex items-center space-x-6"> <a href="##" class="hover:text-white transition">Shipping</a> <a href="##" class="hover:text-white transition">Warranty</a> <a href="##" class="hover:text-white transition underline decoration-slate-600 underline-offset-4">Store Locator</a> </div> </div> </div> <!-- Main Navigation --> <nav class="bg-white px-6 shadow-sm sticky top-0 md:relative z-40" x-data="{ open: false }"> <div class="max-w-7xl mx-auto h-20 flex items-center justify-between"> <!-- Logo --> <a href="##" class="text-3xl font-black text-rose-600 italic">VELO.</a> <!-- Desktop Links --> <div class="hidden md:flex items-center space-x-10 h-full"> <div class="relative group h-full flex items-center"> <a href="##" class="text-sm font-bold text-gray-800 hover:text-rose-600 border-b-2 border-transparent hover:border-rose-600 h-full flex items-center pt-1 transition">Bikes</a> </div> <div class="relative group h-full flex items-center"> <a href="##" class="text-sm font-bold text-gray-800 hover:text-rose-600 border-b-2 border-transparent hover:border-rose-600 h-full flex items-center pt-1 transition">Apparel</a> </div> <div class="relative group h-full flex items-center"> <a href="##" class="text-sm font-bold text-gray-800 hover:text-rose-600 border-b-2 border-transparent hover:border-rose-600 h-full flex items-center pt-1 transition">Accessories</a> </div> <a href="##" class="text-sm font-bold text-gray-400 hover:text-rose-600 transition tracking-tighter">Sale</a> </div> <!-- Action --> <div class="hidden md:flex items-center"> <button class="relative p-2 text-gray-400 hover:text-gray-800 transition"> <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> </svg> <span class="absolute top-1 right-1 h-4 w-4 bg-rose-600 text-white text-[10px] font-black rounded-full flex items-center justify-center">2</span> </button> </div> <!-- Mobile Button --> <button @click="open = !open" class="md:hidden p-2 text-gray-900 border border-gray-100 rounded-lg"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6H20M4 12H20M4 18H12" /> <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <!-- Mobile Navigation --> <div class="md:hidden bg-white px-4 py-8 space-y-6 shadow-xl border-t border-gray-50" x-show="open" @click.away="open = false" style="display: none;"> <a href="##" class="block text-2xl font-black text-gray-800">Bikes</a> <a href="##" class="block text-2xl font-black text-gray-800">Apparel</a> <a href="##" class="block text-2xl font-black text-gray-800 border-b border-gray-100 pb-6">Accessories</a> <div class="flex items-center justify-between pt-2"> <span class="text-sm text-gray-400 font-bold uppercase tracking-widest">Support</span> <span class="text-sm text-gray-800 font-bold">+1 (555) 000-0000</span> </div> </div> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
