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 Dropdown Menu With Icons</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: true }"> <div class="relative"> <!-- Trigger --> <button @click="open = !open" @click.away="open = false" class="px-8 py-4 bg-indigo-600 text-white text-xs font-black uppercase tracking-[0.2em] rounded-2xl shadow-xl hover:bg-slate-900 transition-all flex items-center gap-4 cursor-pointer" > Initialize Command <svg class="h-4 w-4 transition-transform duration-300" :class="open ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" /></svg> </button> <!-- Menu --> <div x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 scale-90" x-transition:enter-end="opacity-100 translate-y-0 scale-100" class="absolute left-0 mt-5 w-72 bg-white/80 backdrop-blur-xl border border-white rounded-[2rem] shadow-4xl overflow-hidden z-50 p-3" style="display: none;" > <div class="space-y-1"> <a href="#" class="group flex items-center justify-between px-5 py-4 hover:bg-indigo-600 rounded-[1.5rem] transition-all"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center transition-colors group-hover:bg-white/20 group-hover:text-white"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <div class="text-left"> <p class="text-[11px] font-black text-slate-900 uppercase tracking-widest group-hover:text-white transition-colors">Neural Boost</p> <p class="text-[9px] text-slate-400 group-hover:text-indigo-100 uppercase tracking-widest font-bold mt-0.5">Primary Tier</p> </div> </div> <svg class="h-4 w-4 text-slate-200 group-hover:text-white/50 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" /></svg> </a> <a href="#" class="group flex items-center justify-between px-5 py-4 hover:bg-slate-900 rounded-[1.5rem] transition-all"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-slate-50 text-slate-400 rounded-xl flex items-center justify-center transition-colors group-hover:bg-white/10 group-hover:text-white"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12h6m-6 4h6m2 5H6a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2v14a2 2 0 01-2 2z" /></svg> </div> <div class="text-left"> <p class="text-[11px] font-black text-slate-900 uppercase tracking-widest group-hover:text-white transition-colors">Audit Manifest</p> <p class="text-[9px] text-slate-400 group-hover:text-slate-500 uppercase tracking-widest font-bold mt-0.5">Read Only</p> </div> </div> <svg class="h-4 w-4 text-slate-200 group-hover:text-white/50 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" /></svg> </a> <a href="#" class="group flex items-center justify-between px-5 py-4 hover:bg-rose-600 rounded-[1.5rem] transition-all"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-rose-50 text-rose-600 rounded-xl flex items-center justify-center transition-colors group-hover:bg-white/20 group-hover:text-white"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg> </div> <div class="text-left"> <p class="text-[11px] font-black text-slate-900 uppercase tracking-widest group-hover:text-white transition-colors">Purge Segment</p> <p class="text-[9px] text-slate-400 group-hover:text-rose-100 uppercase tracking-widest font-bold mt-0.5">Destructive</p> </div> </div> <svg class="h-4 w-4 text-slate-200 group-hover:text-white/50 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" /></svg> </a> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
