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 Palette</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body class="bg-gray-100/50 flex justify-center items-start min-h-screen pt-[15vh] p-6 antialiased" x-data="{ open: true }"> <!-- Command Palette Modal --> <div x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="max-w-2xl w-full bg-white rounded-[2.5rem] shadow-[0_32px_128px_-16px_rgba(0,0,0,0.1)] border border-slate-100 overflow-hidden ring-1 ring-slate-200/50" @keydown.escape.window="open = false"> <!-- Search Header --> <div class="relative border-b border-slate-50 p-6 flex items-center gap-4"> <svg class="h-6 w-6 text-slate-400" 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> <input type="text" placeholder="Type a protocol command..." class="flex-1 bg-transparent border-none outline-none text-lg font-bold text-slate-900 placeholder:text-slate-300 placeholder:font-black placeholder:uppercase placeholder:tracking-widest"> <div class="flex items-center gap-1.5 px-3 py-1.5 bg-slate-50 border border-slate-100 rounded-lg text-[10px] font-black text-slate-400 tracking-tighter shadow-inner"> <span>ESC</span> </div> </div> <!-- Results List --> <div class="p-4 space-y-6"> <div> <h3 class="px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">Manifest Actions</h3> <div class="space-y-1"> <button class="w-full flex items-center justify-between p-4 rounded-2xl bg-indigo-50/50 text-indigo-600 border border-indigo-100 hover:bg-indigo-100 transition-all group cursor-pointer"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-white rounded-xl flex items-center justify-center shadow-sm"> <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" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <div class="text-left"> <p class="text-sm font-bold">Initialize Spectral Sync</p> <p class="text-[9px] font-black uppercase tracking-widest text-indigo-400/70">Protocol Alpha</p> </div> </div> <div class="h-8 w-8 bg-white border border-indigo-200 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100"> <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="M9 5l7 7-7 7" /></svg> </div> </button> <button class="w-full flex items-center justify-between p-4 rounded-2xl hover:bg-slate-50 text-slate-600 border border-transparent transition-all group cursor-pointer"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-slate-50 rounded-xl flex items-center justify-center"> <svg class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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> </div> <div class="text-left"> <p class="text-sm font-bold text-slate-900">Authorize Terminal Seat</p> <p class="text-[9px] font-black uppercase tracking-widest text-slate-400">Security Index</p> </div> </div> </button> </div> </div> <div> <h3 class="px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">Regional Hubs</h3> <div class="space-y-1"> <button class="w-full flex items-center p-4 rounded-2xl hover:bg-slate-50 text-slate-600 border border-transparent transition-all group cursor-pointer"> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-slate-50 rounded-xl flex items-center justify-center"> <svg class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2h1.5a2.5 2.5 0 012.5 2.5V14" /></svg> </div> <div class="text-left"> <p class="text-sm font-bold text-slate-900">US-East Apex Node</p> </div> </div> </button> </div> </div> </div> <!-- Modal Footer --> <div class="bg-slate-50/50 p-4 border-t border-slate-50 flex items-center gap-6 px-10"> <div class="flex items-center gap-2"> <div class="px-1.5 py-1 bg-white border border-slate-200 rounded text-[9px] font-black text-slate-400 shadow-sm">↵</div> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Execute</span> </div> <div class="flex items-center gap-2"> <div class="px-1.5 py-1 bg-white border border-slate-200 rounded text-[9px] font-black text-slate-400 shadow-sm">↑↓</div> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Navigate</span> </div> </div> </div> <!-- Background Help --> <div class="fixed bottom-10 left-10 text-[10px] font-black text-slate-300 uppercase tracking-[0.4em]">Press Command + K to Initialise</div> </body> </html>
