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 Keyboard Hints</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center items-center min-h-screen p-6 antialiased"> <div class="max-w-md w-full grid grid-cols-1 gap-12"> <!-- Component with Hint --> <div class="bg-white p-10 rounded-[3rem] border border-slate-100 shadow-sm space-y-8"> <div class="flex items-center justify-between"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Protocol Control</span> <div class="flex items-center gap-1"> <kbd class="px-1.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-[9px] font-black text-slate-400 shadow-inner">⌘</kbd> <kbd class="px-1.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-[9px] font-black text-slate-400 shadow-inner">K</kbd> </div> </div> <div class="space-y-4"> <label class="text-sm font-bold text-slate-900 block px-2">Launch Sequence Index</label> <div class="relative group"> <input type="text" placeholder="Search parameters..." class="w-full bg-slate-50 border-2 border-slate-50 p-6 rounded-2xl focus:border-indigo-600 focus:bg-white outline-none transition-all font-bold placeholder:text-slate-300"> <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-1 pointer-events-none opacity-40 group-focus-within:opacity-0 transition-opacity"> <kbd class="px-2 py-1 bg-white border border-slate-200 rounded-lg text-[9px] font-black text-slate-400 shadow-sm">/</kbd> </div> </div> </div> <div class="pt-6 border-t border-slate-50 flex flex-wrap gap-4"> <div class="flex items-center gap-2"> <kbd class="px-1.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-[9px] font-black text-slate-400">Esc</kbd> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Abort</span> </div> <div class="flex items-center gap-2"> <kbd class="px-1.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-[9px] font-black text-slate-400">↵</kbd> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Execute</span> </div> <div class="flex items-center gap-2 ml-auto"> <kbd class="px-1.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-[9px] font-black text-slate-400">?</kbd> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Help</span> </div> </div> </div> <p class="text-center text-[10px] font-black text-slate-300 uppercase tracking-[0.4em]">Integrated Input Sovereignty</p> </div> </body> </html>
