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 Simple Navbar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100 p-8"> <nav class="bg-white px-6 py-4 rounded-xl shadow-sm max-w-4xl mx-auto flex items-center justify-between" x-data="{ open: false }"> <div class="font-bold text-xl tracking-tight">SimpleNav</div> <div class="hidden md:flex space-x-6 text-sm font-medium text-gray-600"> <a href="##" class="hover:text-blue-600 transition">Home</a> <a href="##" class="hover:text-blue-600 transition">About</a> <a href="##" class="hover:text-blue-600 transition">Services</a> <a href="##" class="hover:text-blue-600 transition">Contact</a> </div> <!-- Mobile menu button --> <div class="md:hidden"> <button @click="open = !open" class="text-gray-500 hover:text-gray-700"> <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> <!-- Mobile Menu Overlay --> <div class="absolute top-24 left-8 right-8 bg-white p-4 rounded-lg shadow-lg md:hidden" x-show="open" @click.away="open = false"> <div class="flex flex-col space-y-4 text-center"> <a href="##" class="text-gray-600 hover:text-blue-600">Home</a> <a href="##" class="text-gray-600 hover:text-blue-600">About</a> <a href="##" class="text-gray-600 hover:text-blue-600">Services</a> <a href="##" class="text-gray-600 hover:text-blue-600">Contact</a> </div> </div> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
