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 Navbar With User Avatar Menu</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100 h-screen"> <nav class="bg-white border-b border-gray-200" x-data="{ open: false, userMenu: false }"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16"> <div class="flex"> <div class="shrink-0 flex items-center"> <span class="text-2xl font-bold text-indigo-600">Logo</span> </div> <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> <a href="##" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a> <a href="##" class="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Team</a> </div> </div> <!-- User Menu --> <div class="flex items-center"> <div class="relative ml-3"> <div> <button @click="userMenu = !userMenu" type="button" class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button"> <span class="sr-only">Open user menu</span> <img class="h-10 w-10 rounded-full border border-gray-200" src="https://i.pravatar.cc/100?u=user1" alt="Avatar"> </button> </div> <!-- Profile dropdown --> <div x-show="userMenu" @click.away="userMenu = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" style="display: none;" > <a href="##" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> <a href="##" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> <a href="##" class="block px-4 py-2 text-sm text-gray-700 border-t border-gray-100 hover:bg-gray-100">Sign out</a> </div> </div> <!-- Mobile menu button --> <div class="sm:hidden ml-4"> <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> </div> </div> </div> <!-- Mobile Menu --> <div class="sm:hidden" x-show="open" @click.away="open = false" style="display: none;"> <div class="space-y-1 pb-3 pt-2"> <a href="##" class="block bg-indigo-50 border-l-4 border-indigo-500 py-2 pl-3 pr-4 text-base font-medium text-indigo-700">Projects</a> <a href="##" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700">Team</a> </div> </div> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
