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 Three Column Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100 flex flex-col min-h-screen antialiased"> <header class="h-20 bg-white border-b border-slate-200 px-8 flex items-center justify-between sticky top-0 z-50"> <div class="text-lg font-black tracking-tighter uppercase">Vanguard.Stream</div> <div class="flex items-center gap-6"> <button class="px-6 py-2.5 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-indigo-600/20">Go Live</button> </div> </header> <main class="flex-1 flex flex-col lg:flex-row gap-px bg-slate-200"> <!-- Left Column: Navigation/Pinned --> <aside class="w-full lg:w-80 bg-white p-8 space-y-12"> <nav class="space-y-2"> <h3 class="px-4 text-[10px] font-black text-slate-300 uppercase tracking-widest mb-4">Feed Discovery</h3> <a href="#" class="flex items-center gap-4 p-4 bg-slate-50 text-slate-900 rounded-2xl font-bold transition-all border border-slate-100"> <svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /></svg> <span>Main Broadcast</span> </a> <a href="#" class="flex items-center gap-4 p-4 text-slate-400 hover:bg-slate-50 hover:text-slate-900 rounded-2xl font-bold transition-all"> <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg> <span>Collective Hubs</span> </a> </nav> <div class="space-y-4"> <h3 class="px-4 text-[10px] font-black text-slate-300 uppercase tracking-widest">Active Mirroring</h3> <div class="space-y-3"> <div class="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100"> <div class="h-3 w-3 bg-emerald-500 rounded-full"></div> <p class="text-[11px] font-bold text-slate-600 uppercase tracking-tight">US-EAST-01</p> </div> </div> </div> </aside> <!-- Middle Column: Main Feed --> <section class="flex-1 bg-white p-12 min-w-0"> <div class="max-w-2xl mx-auto space-y-12"> <div class="flex items-center gap-4"> <div class="h-12 w-12 bg-slate-900 rounded-2xl flex items-center justify-center text-white font-black">AZ</div> <div class="flex-1 bg-slate-50 border border-slate-100 p-5 rounded-[2rem] text-slate-400 font-bold italic"> "Broadcast a new protocol update..." </div> </div> <div class="space-y-12"> <div class="bg-white rounded-[3rem] border border-slate-100 shadow-sm overflow-hidden group"> <div class="h-96 bg-slate-50 flex items-center justify-center relative group-hover:bg-slate-100 transition-colors"> <svg class="h-12 w-12 text-slate-200" fill="none" viewBox="0 0 24 24" stroke="currentColor font-light"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg> </div> <div class="p-10 space-y-4"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-widest">Protocol α-Update</span> <h2 class="text-2xl font-black text-slate-900 tracking-tight leading-none">Vanguard Mesh Stabilization Succesful</h2> <p class="text-slate-500 leading-relaxed">The latest sync sequence has been verified by 4,281 apex nodes across all geographic sectors.</p> </div> </div> </div> </div> </section> <!-- Right Column: Context/Stats --> <aside class="w-full lg:w-96 bg-gray-50 p-12 space-y-12 hidden xl:block"> <div class="bg-indigo-600 rounded-[3rem] p-10 text-white space-y-6 shadow-2xl shadow-indigo-600/30"> <p class="text-[9px] font-black uppercase tracking-[0.4em] opacity-60">Real-time Metrics</p> <div class="space-y-1"> <p class="text-4xl font-black tracking-tighter">12.2 TB/s</p> <p class="text-[9px] font-black uppercase tracking-widest opacity-60">Ingress Bandwidth</p> </div> <div class="pt-6 border-t border-white/10 flex justify-between"> <div> <p class="text-lg font-black">4,281</p> <p class="text-[8px] font-black uppercase tracking-widest opacity-60">Apex Nodes</p> </div> <div> <p class="text-lg font-black">1.2ms</p> <p class="text-[8px] font-black uppercase tracking-widest opacity-60">Latency</p> </div> </div> </div> <div class="space-y-6"> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-widest px-4">Trending Components</h3> <div class="space-y-4"> <div class="p-6 bg-white rounded-3xl border border-slate-100 shadow-sm"> <p class="text-[11px] font-black uppercase tracking-widest text-indigo-600 mb-1">Spectral Analysis</p> <p class="text-sm font-bold text-slate-900 leading-tight">Optimizing decentralized consensus for scale.</p> </div> <div class="p-6 bg-white rounded-3xl border border-slate-100 shadow-sm"> <p class="text-[11px] font-black uppercase tracking-widest text-indigo-600 mb-1">Apex Routing</p> <p class="text-sm font-bold text-slate-900 leading-tight">Dynamic mesh re-balancing in US-EAST-01.</p> </div> </div> </div> </aside> </main> </body> </html>
