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 Profile Dropdown Menu</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-32 antialiased" x-data="{ open: false }"> <div class="relative"> <!-- Trigger --> <button @click="open = !open" @click.away="open = false" class="flex items-center gap-3 p-1 pr-4 bg-white border border-slate-200 rounded-full shadow-sm hover:shadow-md transition-all cursor-pointer group" > <div class="h-9 w-9 bg-indigo-600 rounded-full flex items-center justify-center text-white ring-2 ring-white shadow-sm overflow-hidden"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <div class="text-left hidden sm:block"> <p class="text-xs font-black text-slate-800 tracking-tight leading-none uppercase">A. Sterling</p> </div> <svg class="h-4 w-4 text-slate-300 group-hover:text-slate-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" /></svg> </button> <!-- Menu --> <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2 scale-95" x-transition:enter-end="opacity-100 translate-y-0 scale-100" class="absolute left-1/2 -translate-x-1/2 mt-4 w-64 bg-white border border-slate-100 rounded-[2.5rem] shadow-3xl overflow-hidden z-50 origin-top" style="display: none;" > <!-- Profile Header --> <div class="px-6 py-8 bg-indigo-50/50 border-b border-indigo-50"> <h4 class="text-sm font-black text-slate-900 tracking-tighter italic">Alexander Sterling</h4> <p class="text-[10px] text-indigo-500 font-bold uppercase tracking-widest mt-1">Lead Architect • Sector 4</p> </div> <div class="p-3"> <div class="space-y-1"> <a href="#" class="flex items-center gap-3 px-4 py-3 text-xs font-bold text-slate-600 rounded-[1.5rem] hover:bg-slate-50 hover:text-slate-900 transition-all"> <svg class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg> Personal Manifest </a> <a href="#" class="flex items-center gap-3 px-4 py-3 text-xs font-bold text-slate-600 rounded-[1.5rem] hover:bg-slate-50 hover:text-slate-900 transition-all"> <svg class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg> Security Protocols </a> <a href="#" class="flex items-center gap-3 px-4 py-3 text-xs font-bold text-slate-600 rounded-[1.5rem] hover:bg-slate-50 hover:text-slate-900 transition-all"> <svg class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg> System Tuning </a> </div> </div> <div class="mt-2 px-6 py-6 bg-slate-50 flex justify-between items-center"> <span class="text-[9px] font-black text-rose-500 uppercase tracking-widest italic">Terminate Session</span> <button @click="open = false" class="h-8 w-8 bg-rose-50 text-rose-600 rounded-xl flex items-center justify-center hover:bg-rose-600 hover:text-white transition-colors cursor-pointer"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg> </button> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
