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 Holy Grail Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-white min-h-screen flex flex-col antialiased font-medium text-slate-500"> <!-- Header --> <header class="h-20 bg-slate-900 text-white flex items-center justify-between px-10 sticky top-0 z-50"> <div class="text-xl font-black tracking-tighter uppercase">Vanguard.HG</div> <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-indigo-500 rounded-xl border border-white/10"></div> </div> </header> <!-- The Holy Grail Structure --> <div class="flex-1 flex flex-col md:flex-row"> <!-- Left Sidebar --> <aside class="w-full md:w-64 bg-slate-50 border-r border-slate-100 p-10 space-y-8 order-2 md:order-1"> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-widest">Navigation</h3> <nav class="space-y-2"> <a href="#" class="block px-4 py-2 text-indigo-600 font-bold bg-white rounded-lg shadow-sm">Dashboard</a> <a href="#" class="block px-4 py-2 hover:text-slate-900 transition-colors">Spectral Logs</a> <a href="#" class="block px-4 py-2 hover:text-slate-900 transition-colors">Node Map</a> </nav> </aside> <!-- Center Content (Main) --> <main class="md:flex-1 bg-white p-12 lg:p-24 order-1 md:order-2"> <div class="max-w-2xl mx-auto space-y-12"> <div class="space-y-4"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Protocol Layout: HG-01</span> <h1 class="text-5xl font-black text-slate-900 tracking-tighter leading-none italic">The Holy Grail</h1> <p class="text-lg leading-relaxed">A classic web layout pattern featuring a fixed-width left and right sidebar with a fluid center content column.</p> </div> <div class="h-96 bg-slate-50 rounded-[4rem] border border-slate-100 flex items-center justify-center text-slate-200 font-black uppercase text-xl">Center Viewport</div> <p class="leading-relaxed">In this implementation, we utilize Flexbox to ensure the center column always receives the majority of horizontal gravity while sidebars maintain their structural integrity.</p> </div> </main> <!-- Right Sidebar --> <aside class="w-full md:w-80 bg-slate-50 border-l border-slate-100 p-10 space-y-12 order-3 md:order-3"> <div> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-widest mb-4">Node Metrics</h3> <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-1"> <p class="text-[9px] font-black text-slate-300 uppercase tracking-widest leading-none mb-1">Spectral Latency</p> <p class="text-3xl font-black text-slate-900 tracking-tighter">0.82ms</p> </div> </div> <div> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-widest mb-4">Latest Consensus</h3> <div class="space-y-3"> <div class="h-24 bg-slate-200/50 rounded-2xl animate-pulse"></div> <div class="h-24 bg-slate-200/50 rounded-2xl animate-pulse [animation-delay:0.5s]"></div> </div> </div> </aside> </div> <!-- Footer --> <footer class="h-20 bg-white border-t border-slate-100 flex items-center justify-center px-10"> <p class="text-[10px] font-black text-slate-300 uppercase tracking-[0.4em]">© 2026 Vanguard HG-Consensus Layer</p> </footer> </body> </html>
