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 Mobile Hamburger Navbar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-50 min-h-screen"> <nav class="bg-white px-6 h-16 flex items-center justify-between border-b border-slate-100 shadow-sm sticky top-0 md:relative" x-data="{ open: false }"> <div class="flex items-center space-x-2"> <div class="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-xs ring-4 ring-slate-100">B</div> <span class="font-bold text-slate-800 tracking-tighter">MobileFirst</span> </div> <!-- The Minimal Hamburger - Primary on all screens --> <button @click="open = !open" class="group relative p-3 rounded-xl bg-slate-50 text-slate-600 hover:text-slate-900 transition-all hover:bg-slate-100"> <div class="relative w-6 h-5 flex flex-col justify-between items-end"> <span class="h-0.5 bg-current transition-all duration-300 origin-right rounded-full" :class="open ? 'w-6 -rotate-45 translate-y-0.5' : 'w-6'"></span> <span class="h-0.5 bg-current transition-all duration-300 rounded-full" :class="open ? 'w-0 opacity-0' : 'w-4'"></span> <span class="h-0.5 bg-current transition-all duration-300 origin-right rounded-full" :class="open ? 'w-6 rotate-45 -translate-y-0.5' : 'w-5'"></span> </div> </button> <!-- Mobile Menu Overlay --> <div x-show="open" @click.away="open = false" x-transition:enter="transition-all ease-out duration-300" x-transition:enter-start="translate-x-full opacity-0" x-transition:enter-end="translate-x-0 opacity-100" x-transition:leave="transition-all ease-in duration-300" x-transition:leave-start="translate-x-0 opacity-100" x-transition:leave-end="translate-x-full opacity-0" class="fixed inset-0 z-50 bg-slate-900 text-white p-12 flex flex-col justify-center space-y-12" style="display: none;" > <button @click="open = false" class="absolute top-8 right-8 text-slate-400 hover:text-white transition"> <svg class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <div class="space-y-8"> <a href="##" class="block text-5xl font-black hover:text-indigo-400 transition transform hover:translate-x-4">Works</a> <a href="##" class="block text-5xl font-black hover:text-indigo-400 transition transform hover:translate-x-4">About</a> <a href="##" class="block text-5xl font-black hover:text-indigo-400 transition transform hover:translate-x-4">Journal</a> <a href="##" class="block text-5xl font-black hover:text-indigo-400 transition transform hover:translate-x-4 border-b-2 border-slate-800 pb-8 hover:border-indigo-400">Careers</a> </div> <div class="space-y-4"> <p class="text-xs font-bold text-slate-500 uppercase tracking-widest">Connect</p> <div class="flex space-x-6"> <a href="##" class="text-sm font-bold hover:text-indigo-400">Twitter</a> <a href="##" class="text-sm font-bold hover:text-indigo-400">Instagram</a> <a href="##" class="text-sm font-bold hover:text-indigo-400">LinkedIn</a> </div> </div> </div> </nav> <main class="max-w-xl mx-auto py-24 px-8 text-center italic text-slate-400 leading-relaxed font-serif"> "Simplicity is the ultimate sophistication." </main> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
