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 Sticky Sidebar Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-screen antialiased"> <header class="bg-white border-b border-slate-100 h-20 flex items-center px-12 sticky top-0 z-50"> <span class="text-xl font-black text-slate-900 tracking-tighter uppercase">Vanguard.Docs</span> </header> <div class="max-w-7xl mx-auto px-12 py-16"> <div class="flex flex-col lg:flex-row gap-16"> <!-- Sticky Sidebar --> <aside class="w-full lg:w-72 flex-shrink-0"> <div class="sticky top-32 space-y-12"> <nav class="space-y-2"> <h3 class="px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Architecture</h3> <a href="#" class="block px-6 py-4 bg-indigo-50 text-indigo-600 rounded-2xl text-[10px] font-black uppercase tracking-widest">Core Consensus</a> <a href="#" class="block px-6 py-4 text-slate-500 hover:text-slate-900 hover:bg-slate-50 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">Spectral Layer</a> <a href="#" class="block px-6 py-4 text-slate-500 hover:text-slate-900 hover:bg-slate-50 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">Node Hierarchy</a> </nav> <div class="p-8 bg-slate-900 rounded-[2.5rem] text-white"> <p class="text-[9px] font-black text-indigo-400 uppercase tracking-[0.4em] mb-3">Sync Status</p> <div class="flex items-center gap-3"> <div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div> <span class="text-xs font-bold">14 active nodes</span> </div> </div> </div> </aside> <!-- Main Content --> <main class="flex-1 space-y-20"> <section class="space-y-6"> <h1 class="text-5xl font-black text-slate-900 tracking-tight leading-none">Core Consensus Protocol</h1> <p class="text-slate-500 text-xl leading-relaxed font-medium">The Vanguard consensus mechanism ensures distributed integrity across all spectral layers by requiring multi-node affirmation for every manifest update.</p> </section> <div class="h-[50rem] bg-white rounded-[4rem] border border-slate-100 shadow-sm p-12"> <div class="h-full w-full bg-slate-50 rounded-[3rem] border border-dashed border-slate-200"></div> </div> <section class="space-y-6"> <h2 class="text-3xl font-black text-slate-900 uppercase tracking-tighter leading-none">Vulnerability Scanning</h2> <p class="text-slate-500 text-lg leading-relaxed">Each entry into the Vanguard registry is subjected to rigorous spectral analysis. This prevents manifest corruption and maintains the sovereign security of the network.</p> </section> <div class="h-[50rem] bg-white rounded-[4rem] border border-slate-100 shadow-sm p-12"> <div class="h-full w-full bg-slate-50 rounded-[3rem] border border-dashed border-slate-200"></div> </div> </main> </div> </div> </body> </html>
