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 Notification Bell</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-900"> <nav class="bg-slate-800/50 backdrop-blur-xl border-b border-white/5" x-data="{ open: false, showNotifications: false }"> <div class="max-w-7xl mx-auto px-6 flex items-center justify-between h-20"> <!-- Logo --> <a href="##" class="flex items-center space-x-2"> <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-purple-500 to-pink-500 shadow-lg shadow-purple-500/20"></div> <span class="text-white font-bold tracking-tight">Vortex</span> </a> <!-- Navigation --> <div class="hidden lg:flex items-center space-x-10"> <a href="##" class="text-slate-400 hover:text-white transition text-sm font-medium">Active Nodes</a> <a href="##" class="text-slate-400 hover:text-white transition text-sm font-medium">Bandwidth</a> <a href="##" class="text-slate-400 hover:text-white transition text-sm font-medium">Security</a> </div> <!-- Toolbar --> <div class="flex items-center space-x-4"> <!-- Notification Bell --> <div class="relative"> <button @click="showNotifications = !showNotifications" class="p-2.5 rounded-xl bg-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition group relative" > <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> <!-- Red Badge --> <span class="absolute top-2.5 right-2.5 block h-2.5 w-2.5 rounded-full bg-rose-500 ring-2 ring-slate-800 group-hover:scale-110 transition"></span> </button> <!-- Notification Dropdown --> <div x-show="showNotifications" x-transition @click.away="showNotifications = false" class="absolute right-0 mt-4 w-80 bg-slate-800 border border-white/10 rounded-2xl shadow-2xl py-2 z-50 overflow-hidden" style="display: none;" > <div class="px-5 py-3 border-b border-white/5 flex justify-between items-center"> <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Alerts</span> <button class="text-[10px] text-purple-400 hover:text-purple-300 font-bold uppercase">Mark all as read</button> </div> <div class="max-h-64 overflow-y-auto"> <a href="##" class="block px-5 py-4 hover:bg-white/5 transition border-b border-white/5"> <p class="text-sm text-white font-medium">System Update</p> <p class="text-xs text-slate-500 mt-1">Version 4.2.1 is now available for deployment.</p> </a> <a href="##" class="block px-5 py-4 hover:bg-white/5 transition"> <p class="text-sm text-white font-medium">Node Alert</p> <p class="text-xs text-slate-500 mt-1">Asia-Pacific node is reaching 90% capacity.</p> </a> </div> <div class="px-5 py-3 bg-slate-800/80 text-center"> <a href="##" class="text-xs text-slate-300 font-bold hover:text-white transition">View all activity</a> </div> </div> </div> <div class="h-8 w-px bg-white/5 hidden sm:block"></div> <!-- User Profile --> <button class="flex items-center space-x-3 p-1 rounded-full hover:bg-white/5 transition"> <img src="https://i.pravatar.cc/150?u=antigravity" class="w-8 h-8 rounded-full border border-white/20" alt="User"> <svg class="h-4 w-4 text-slate-500 hidden sm:block" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </button> <!-- Mobile Toggler --> <button @click="open = !open" class="lg:hidden p-2 text-slate-400"> <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 border-t border-white/5 p-6 bg-slate-800/80 space-y-4" x-show="open" @click.away="open = false"> <a href="##" class="block text-slate-400 font-medium">Active Nodes</a> <a href="##" class="block text-slate-400 font-medium">Bandwidth</a> <a href="##" class="block text-slate-400 font-medium border-b border-white/5 pb-4">Security</a> <a href="##" class="block text-white font-bold">Profile Settings</a> <a href="##" class="block text-white font-bold">Billing</a> </div> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
