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 Full Height Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-900 text-slate-300 flex flex-col h-screen overflow-hidden antialiased"> <!-- Header --> <header class="h-16 border-b border-slate-800 flex items-center justify-between px-6 flex-shrink-0 bg-slate-900/50 backdrop-blur-md z-10 w-full"> <div class="flex items-center gap-4"> <div class="h-8 w-8 bg-indigo-600 rounded-md"></div> <div class="text-sm font-black tracking-widest text-white uppercase">Vanguard Terminal</div> </div> <div class="flex items-center gap-6"> <span class="text-xs font-bold uppercase tracking-[0.2em] text-emerald-400 flex items-center gap-2"> <span class="h-2 w-2 bg-emerald-400 rounded-full animate-pulse"></span> Uplink Established </span> <button class="h-8 w-8 bg-slate-800 rounded-md flex items-center justify-center hover:bg-slate-700 transition"> <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" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/></svg> </button> </div> </header> <!-- Main Content bounded by screen height --> <main class="flex-1 flex overflow-hidden w-full relative"> <!-- Left Panel --> <aside class="w-72 border-r border-slate-800 bg-slate-900/40 p-6 flex flex-col gap-6 overflow-y-auto hidden md:flex"> <div> <h3 class="text-[10px] uppercase tracking-widest text-slate-500 font-bold mb-3">Nodes Online</h3> <ul class="space-y-2"> <li class="p-3 bg-slate-800/50 rounded-lg border border-slate-700/50 flex items-center justify-between hover:border-indigo-500/50 transition cursor-pointer"> <span class="text-xs font-mono text-white">us-east-alpha</span> <span class="text-[9px] text-emerald-400">12ms</span> </li> <li class="p-3 bg-indigo-900/20 rounded-lg border border-indigo-500/30 flex items-center justify-between cursor-pointer"> <span class="text-xs font-mono text-white">eu-west-apex</span> <span class="text-[9px] text-emerald-400">18ms</span> </li> <li class="p-3 bg-slate-800/50 rounded-lg border border-slate-700/50 flex items-center justify-between hover:border-indigo-500/50 transition cursor-pointer"> <span class="text-xs font-mono text-white">as-pacific-core</span> <span class="text-[9px] text-emerald-400">145ms</span> </li> </ul> </div> <div> <h3 class="text-[10px] uppercase tracking-widest text-slate-500 font-bold mb-3">System Logs</h3> <div class="space-y-1 font-mono text-[10px]"> <p class="text-slate-400">[14:02:00] INIT handshakes...</p> <p class="text-indigo-400">[14:02:01] SYN-ACK received</p> <p class="text-slate-400">[14:02:04] Verifying payload signatures</p> <p class="text-emerald-400">[14:02:05] Spectral access granted</p> <p class="text-slate-400">[14:02:10] Awaiting terminal input_</p> </div> </div> </aside> <!-- Center Canvas / Map Area --> <section class="flex-1 bg-slate-950 relative overflow-hidden flex items-center justify-center"> <!-- Grid Background --> <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_10%,transparent_100%)]"></div> <!-- Central Focus Element --> <div class="relative z-10 flex flex-col items-center gap-8"> <div class="relative h-64 w-64 rounded-full border border-indigo-500/30 flex items-center justify-center"> <div class="absolute inset-0 bg-indigo-500/10 rounded-full blur-xl animate-pulse"></div> <div class="h-48 w-48 rounded-full border border-indigo-500/50 flex items-center justify-center animate-[spin_10s_linear_infinite]"> <div class="h-4 w-4 bg-indigo-400 rounded-full shadow-[0_0_15px_rgba(129,140,248,0.8)] absolute -top-2"></div> </div> <div class="text-center absolute"> <div class="text-3xl font-black text-white tracking-tighter">EU-APEX</div> <div class="text-[10px] uppercase tracking-widest text-indigo-400 mt-1">Active Cluster</div> </div> </div> </div> <!-- Floating Panels --> <div class="absolute bottom-6 left-6 p-4 bg-slate-900/80 backdrop-blur border border-slate-800 rounded-xl hidden lg:block max-w-xs shadow-2xl"> <h4 class="text-xs font-black text-white uppercase tracking-widest mb-2">Metrics Stream</h4> <div class="space-y-3"> <div> <div class="flex justify-between text-[9px] uppercase font-bold text-slate-400 mb-1"><span>CPU Threading</span> <span>42%</span></div> <div class="h-1 w-full bg-slate-800 rounded-full overflow-hidden"><div class="h-full bg-indigo-500 w-[42%]"></div></div> </div> <div> <div class="flex justify-between text-[9px] uppercase font-bold text-slate-400 mb-1"><span>Memory Allocation</span> <span>78%</span></div> <div class="h-1 w-full bg-slate-800 rounded-full overflow-hidden"><div class="h-full bg-rose-500 w-[78%]"></div></div> </div> </div> </div> </section> <!-- Right Panel --> <aside class="w-80 border-l border-slate-800 bg-slate-900/40 p-6 flex flex-col overflow-y-auto hidden lg:flex"> <h3 class="text-[10px] uppercase tracking-widest text-slate-500 font-bold mb-6">Node Configuration</h3> <div class="flex-1 space-y-6"> <!-- Settings Group --> <div class="space-y-4 text-sm"> <label class="flex items-center justify-between cursor-pointer group"> <span class="text-slate-300 font-medium group-hover:text-white transition">Auto-Sync Architecture</span> <div class="relative inline-flex h-5 w-9 items-center rounded-full bg-indigo-600 transition-colors"> <span class="inline-block h-3.5 w-3.5 translate-x-4 transform rounded-full bg-white transition-transform"></span> </div> </label> <label class="flex items-center justify-between cursor-pointer group"> <span class="text-slate-300 font-medium group-hover:text-white transition">Deep Packet Inspection</span> <div class="relative inline-flex h-5 w-9 items-center rounded-full bg-slate-700 transition-colors"> <span class="inline-block h-3.5 w-3.5 translate-x-1 transform rounded-full bg-white transition-transform"></span> </div> </label> <label class="flex items-center justify-between cursor-pointer group"> <span class="text-slate-300 font-medium group-hover:text-white transition">Allow Mesh Re-routing</span> <div class="relative inline-flex h-5 w-9 items-center rounded-full bg-indigo-600 transition-colors"> <span class="inline-block h-3.5 w-3.5 translate-x-4 transform rounded-full bg-white transition-transform"></span> </div> </label> </div> <div class="pt-6 border-t border-slate-800 space-y-4 text-xs"> <div class="flex justify-between text-slate-400"><span>IPv4 Hash</span><span class="font-mono text-white">4a:3c:00:ff</span></div> <div class="flex justify-between text-slate-400"><span>Encryption Standard</span><span class="font-mono text-white">AES-256-GCM</span></div> <div class="flex justify-between text-slate-400"><span>Firmware Revision</span><span class="font-mono text-white">v4.2.0-rc2</span></div> </div> </div> <button class="w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-white text-[10px] font-black uppercase tracking-widest rounded-lg transition-colors mt-auto flex-shrink-0"> Apply Configuration </button> </aside> </main> </body> </html>
