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 Width Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-screen flex flex-col antialiased"> <!-- Header --> <header class="bg-slate-900 text-white z-50 sticky top-0"> <div class="px-8 h-20 flex items-center justify-between"> <div class="text-xl font-black tracking-tighter">APEX.HUB</div> <div class="flex-1 max-w-xl mx-12 hidden md:block"> <div class="relative"> <input type="text" placeholder="Global search..." class="w-full bg-white/10 rounded-xl px-10 py-2.5 text-sm font-bold border border-white/10 focus:bg-white/20 outline-none"> <svg class="h-4 w-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> </div> </div> <div class="flex items-center gap-6"> <div class="h-10 w-10 bg-indigo-500 rounded-full border-2 border-slate-900 shadow-xl"></div> </div> </div> </header> <!-- Main Content (Full Width) --> <main class="flex-1 flex flex-col"> <!-- Top Stats Bar --> <div class="grid grid-cols-2 md:grid-cols-4 border-b border-slate-200"> <div class="p-8 border-r border-slate-200 bg-white group hover:bg-slate-50 transition-colors cursor-pointer"> <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Active Hubs</p> <p class="text-3xl font-black text-slate-900 tracking-tighter">8,291</p> </div> <div class="p-8 border-r border-slate-200 bg-white group hover:bg-slate-50 transition-colors cursor-pointer"> <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Spectral Latency</p> <p class="text-3xl font-black text-slate-900 tracking-tighter">12ms</p> </div> <div class="p-8 border-r border-slate-200 bg-white group hover:bg-slate-50 transition-colors cursor-pointer"> <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Inbound Packets</p> <p class="text-3xl font-black text-slate-900 tracking-tighter">1.4M</p> </div> <div class="p-8 bg-white group hover:bg-slate-50 transition-colors cursor-pointer"> <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">System Integrity</p> <p class="text-3xl font-black text-emerald-500 tracking-tighter">99.9%</p> </div> </div> <!-- Main Canvas --> <div class="flex-1 p-8 grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="lg:col-span-2 space-y-8"> <div class="h-96 bg-white rounded-[3rem] border border-slate-200 shadow-sm p-12 relative overflow-hidden group"> <div class="absolute top-0 right-0 p-8"> <span class="text-[10px] font-black text-slate-300 uppercase tracking-widest">Protocol Visualization</span> </div> <h2 class="text-3xl font-black text-slate-900 uppercase tracking-tighter">Vanguard Alpha Layer</h2> <div class="mt-12 space-y-4"> <div class="h-2 w-full bg-slate-100 rounded-full overflow-hidden"><div class="h-full w-2/3 bg-indigo-600 rounded-full"></div></div> <div class="h-2 w-full bg-slate-100 rounded-full overflow-hidden"><div class="h-full w-1/3 bg-slate-900 rounded-full"></div></div> <div class="h-2 w-full bg-slate-100 rounded-full overflow-hidden"><div class="h-full w-4/5 bg-indigo-400 rounded-full"></div></div> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="h-64 bg-white rounded-[2.5rem] border border-slate-200 shadow-sm"></div> <div class="h-64 bg-white rounded-[2.5rem] border border-slate-200 shadow-sm"></div> </div> </div> <div class="space-y-8"> <div class="h-[calc(100%-2rem)] bg-slate-900 rounded-[3rem] p-10 text-white relative overflow-hidden"> <div class="absolute inset-0 bg-indigo-600/10 backdrop-blur-3xl"></div> <div class="relative space-y-6"> <h3 class="text-xs font-black uppercase tracking-[0.4em] text-indigo-400">Terminal Log</h3> <div class="space-y-3 font-mono text-[10px] text-indigo-200 opacity-60"> <p>> INITIATING SPECTRAL HANDSHAKE...</p> <p>> APEX NODE REJECTED NULL BYTE.</p> <p>> RE-ROUTING THROUGH US-EAST-01</p> <p>> AUTHENTICATION SUCCESSFUL.</p> <p>> SYSTEM STABILIZED.</p> </div> </div> </div> </div> </div> </main> </body> </html>
