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 Command Menu Dropdown</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100 flex justify-center min-h-screen pt-5 antialiased" x-data="{ open: true, search: '' }"> <div class="relative w-full max-w-2xl"> <!-- Trigger Placeholder --> <div @click="open = true" class="w-full bg-white border border-slate-200 rounded-3xl p-6 flex items-center justify-between cursor-pointer group transition-all duration-300" :class="open ? 'opacity-0 invisible' : 'opacity-100 shadow-3xl'" > <div class="flex items-center gap-4"> <svg class="h-6 w-6 text-slate-300 group-hover:text-indigo-600 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> <span class="text-sm font-bold text-slate-400 italic">Initialize global command menu...</span> </div> <div class="flex gap-1.5 grayscale group-hover:grayscale-0 transition-all"> <kbd class="px-2 py-1 bg-slate-50 border border-slate-200 rounded-lg text-[10px] font-black text-slate-500 shadow-sm uppercase tracking-widest">⌘</kbd> <kbd class="px-2 py-1 bg-slate-50 border border-slate-200 rounded-lg text-[10px] font-black text-slate-500 shadow-sm uppercase tracking-widest">K</kbd> </div> </div> <!-- Command Menu Overlay --> <div x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95 translate-y-8" x-transition:enter-end="opacity-100 scale-100 translate-y-0" class="absolute left-0 top-0 w-full bg-slate-900 border border-slate-800 rounded-[3rem] shadow-[0_40px_100px_-15px_rgba(0,0,0,0.5)] z-50 overflow-hidden" style="display: none;" @click.away="open = false" > <!-- Search Header --> <div class="p-8 border-b border-white/5"> <div class="relative"> <input type="text" x-model="search" placeholder="Search actions, nodes, and manifests..." class="w-full h-14 bg-white/5 border border-white/10 rounded-2xl pl-14 pr-6 text-sm font-medium text-white placeholder-slate-500 focus:border-indigo-500 focus:bg-white/10 outline-none transition-all italic" autofocus > <svg class="absolute left-5 top-1/2 -translate-y-1/2 h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> </div> </div> <!-- Results --> <div class="max-h-[32rem] overflow-y-auto p-4 space-y-8 pb-8"> <div class="space-y-3"> <div class="px-4 flex justify-between items-center"> <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic">Core Actions</span> <span class="text-[9px] text-indigo-400 font-bold uppercase tracking-widest">3 Results</span> </div> <div class="space-y-1"> <button class="w-full flex items-center justify-between px-4 py-4 hover:bg-white/5 rounded-2xl transition-all group cursor-pointer"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-indigo-500/10 text-indigo-500 rounded-xl flex items-center justify-center group-hover:bg-indigo-600 group-hover:text-white transition-colors"> <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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> </div> <span class="text-sm font-bold text-slate-300 group-hover:text-white transition-colors">Create New Neural Segment</span> </div> <span class="text-[9px] font-black text-slate-600 group-hover:text-indigo-400 transition-colors uppercase tracking-widest">Node Alpha</span> </button> <button class="w-full flex items-center justify-between px-4 py-4 hover:bg-white/5 rounded-2xl transition-all group cursor-pointer"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-emerald-500/10 text-emerald-500 rounded-xl flex items-center justify-center group-hover:bg-emerald-600 group-hover:text-white transition-colors"> <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> <span class="text-sm font-bold text-slate-300 group-hover:text-white transition-colors">Boost Network Sync</span> </div> <span class="text-[9px] font-black text-slate-600 group-hover:text-emerald-400 transition-colors uppercase tracking-widest">Global</span> </button> </div> </div> <div class="space-y-3"> <div class="px-4"> <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] italic">Destructive</span> </div> <button class="w-full flex items-center justify-between px-4 py-4 hover:bg-rose-500/10 rounded-2xl transition-all group cursor-pointer"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-rose-500/10 text-rose-500 rounded-xl flex items-center justify-center group-hover:bg-rose-600 group-hover:text-white transition-colors"> <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> <span class="text-sm font-bold text-slate-300 group-hover:text-white transition-colors">Purge Manifest Database</span> </div> <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity"> <kbd class="px-2 py-0.5 bg-white/5 border border-white/10 rounded text-[9px] font-black text-rose-400">Shift</kbd> <kbd class="px-2 py-0.5 bg-white/5 border border-white/10 rounded text-[9px] font-black text-rose-400">P</kbd> </div> </button> </div> </div> <!-- Footer Info --> <div class="bg-black/40 px-8 py-5 flex justify-between items-center border-t border-white/5"> <div class="flex gap-6"> <div class="flex items-center gap-2"> <kbd class="px-1.5 py-0.5 bg-white/10 rounded text-[8px] font-black text-slate-400 border border-white/5">ESC</kbd> <span class="text-[9px] font-bold text-slate-500 uppercase tracking-widest italic">Close</span> </div> <div class="flex items-center gap-2"> <kbd class="px-1.5 py-0.5 bg-white/10 rounded text-[8px] font-black text-slate-400 border border-white/5">↑↓</kbd> <span class="text-[9px] font-bold text-slate-500 uppercase tracking-widest italic">Navigate</span> </div> </div> <span class="text-[8px] font-black text-indigo-500 uppercase tracking-widest">Protocol V4.2</span> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
