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 Action Menu Dropdown</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 (Icon Only) --> <button @click="open = !open" @click.away="open = false" class="h-12 w-12 bg-white border border-slate-200 rounded-2xl shadow-sm flex items-center justify-center text-slate-400 hover:text-indigo-600 hover:border-indigo-100 transition-all cursor-pointer group" > <svg class="h-6 w-6 group-hover:rotate-90 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg> </button> <!-- Menu --> <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95 origin-top-left" x-transition:enter-end="opacity-100 scale-100 origin-top-left" class="absolute left-0 mt-4 w-64 bg-slate-900 border border-slate-800 rounded-3xl shadow-4xl overflow-hidden z-50 p-2" style="display: none;" > <!-- Label --> <div class="px-3 pt-3 pb-2"> <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest italic ml-1">Node Operations</span> </div> <div class="space-y-1"> <button class="w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-300 rounded-xl hover:bg-slate-800 hover:text-white transition-all cursor-pointer"> Deploy Patch <span class="text-[8px] px-1.5 py-0.5 bg-indigo-500/20 text-indigo-400 rounded-md">V4</span> </button> <button class="w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-300 rounded-xl hover:bg-slate-800 hover:text-white transition-all cursor-pointer"> Clone Manifest </button> </div> <div class="my-2 border-t border-slate-800/80 mx-2"></div> <div class="space-y-1"> <button class="w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-300 rounded-xl hover:bg-slate-800 hover:text-white transition-all cursor-pointer"> Sync Status <div class="h-1.5 w-1.5 bg-emerald-500 rounded-full"></div> </button> <button class="w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-rose-400 rounded-xl hover:bg-rose-500/10 transition-all cursor-pointer"> Destroy Node </button> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
