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 Documentation 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"> <!-- Fixed Top Header --> <header class="h-16 bg-white/80 backdrop-blur-md border-b border-slate-100 flex items-center justify-between px-8 sticky top-0 z-50"> <div class="flex items-center gap-8"> <span class="text-lg font-black tracking-tighter uppercase">Vanguard.Docs</span> <div class="hidden md:flex items-center gap-6"> <a href="#" class="text-[10px] font-black text-indigo-600 uppercase tracking-widest">v4.2.1 Stable</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-slate-900 transition-colors">Changelog</a> </div> </div> <div class="flex items-center gap-4"> <div class="relative hidden sm:block"> <input type="text" placeholder="Search documentation..." class="bg-slate-50 border border-slate-100 px-10 py-2 rounded-lg text-xs font-bold outline-none focus:border-indigo-600 w-64"> <kbd class="absolute right-2 top-1/2 -translate-y-1/2 px-1.5 py-0.5 bg-white border border-slate-200 rounded text-[9px] font-black text-slate-400 shadow-sm">/</kbd> </div> <button class="px-5 py-2 bg-slate-900 text-white rounded-lg text-[10px] font-black uppercase tracking-widest">Discord Hub</button> </div> </header> <div class="flex-1 flex max-w-[1440px] mx-auto w-full"> <!-- Left Sidebar (Navigation) --> <aside class="w-72 flex-shrink-0 border-r border-slate-100 hidden lg:block h-[calc(100vh-4rem)] sticky top-16 overflow-y-auto px-8 py-12 scrollbar-hide"> <nav class="space-y-10"> <div> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-[0.4em] mb-4 px-2">Getting Started</h3> <div class="space-y-1"> <a href="#" class="block px-3 py-2 text-xs text-slate-500 hover:text-indigo-600 hover:bg-indigo-50/50 rounded-lg transition-all">Introduction</a> <a href="#" class="block px-3 py-2 text-xs font-bold text-indigo-600 bg-indigo-50 rounded-lg">Initialisation Sequence</a> <a href="#" class="block px-3 py-2 text-xs text-slate-500 hover:text-indigo-600 hover:bg-indigo-50/50 rounded-lg transition-all">Hub Requirements</a> </div> </div> <div> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-[0.4em] mb-4 px-2">Core Protocols</h3> <div class="space-y-1"> <a href="#" class="block px-3 py-2 text-xs text-slate-500 hover:text-indigo-600 hover:bg-indigo-50/50 rounded-lg transition-all">Spectral Analysis</a> <a href="#" class="block px-3 py-2 text-xs text-slate-500 hover:text-indigo-600 hover:bg-indigo-50/50 rounded-lg transition-all">Consensus Layers</a> <a href="#" class="block px-3 py-2 text-xs text-slate-500 hover:text-indigo-600 hover:bg-indigo-50/50 rounded-lg transition-all">Kinetic Routing</a> </div> </div> </nav> </aside> <!-- Main Content Area --> <main class="flex-1 min-w-0 px-8 py-16 lg:px-24"> <div class="max-w-3xl space-y-12"> <header class="space-y-4"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Section 1.2</span> <h1 class="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">Initialisation Sequence</h1> <p class="text-lg text-slate-500 leading-relaxed font-medium">Learn how to establish your primary terminal connection and synchronise with the global spectral registry.</p> </header> <div class="prose prose-slate max-w-none prose-headings:font-black prose-headings:tracking-tighter prose-headings:text-slate-900 prose-p:text-slate-500 prose-p:leading-relaxed prose-strong:text-slate-900 prose-code:text-indigo-600 prose-code:bg-indigo-50 prose-code:px-1 prose-code:rounded prose-pre:bg-slate-900 prose-pre:rounded-2xl"> <p>Before initiating the handshake, ensure your hub is assigned to a verified geographic sector. The <code class="text-xs font-mono">vanguard-cli init</code> command will generate a local manifest containing your protocol identifiers.</p> <div class="bg-indigo-50 border-l-4 border-indigo-500 p-8 rounded-r-2xl my-12"> <div class="flex items-center gap-3 text-indigo-600 font-black text-[10px] uppercase tracking-widest mb-2"> <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.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> <span>Important Note</span> </div> <p class="text-sm text-indigo-900 m-0 leading-relaxed">Always back up your private sector keys before synchronising. Lost identifiers cannot be recovered from the spectral layer.</p> </div> <div class="h-96 bg-slate-50 rounded-[2.5rem] border border-slate-100 flex items-center justify-center text-slate-300 font-mono text-[10px] uppercase tracking-widest">Documentation Example Block</div> <p>Once the initial sync is complete, you will see the active node threshold reach consensus in the terminal logs.</p> </div> <!-- Page Navigation --> <div class="pt-12 border-t border-slate-100 flex justify-between items-center gap-6"> <a href="#" class="flex-1 p-6 border border-slate-100 rounded-2xl hover:border-indigo-600 transition-all group"> <span class="block text-[9px] font-black text-slate-300 uppercase tracking-widest mb-1 group-hover:text-indigo-400">Previous</span> <span class="text-sm font-bold text-slate-900 leading-tight">Introduction</span> </a> <a href="#" class="flex-1 p-6 border border-slate-100 rounded-2xl hover:border-indigo-600 transition-all text-right group"> <span class="block text-[9px] font-black text-slate-300 uppercase tracking-widest mb-1 group-hover:text-indigo-400">Next</span> <span class="text-sm font-bold text-slate-900 leading-tight">Hub Requirements</span> </a> </div> </div> </main> <!-- Right Sidebar (On this page) --> <aside class="w-64 flex-shrink-0 hidden xl:block h-[calc(100vh-4rem)] sticky top-16 overflow-y-auto px-6 py-12"> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-widest mb-4">On This Page</h3> <nav class="space-y-3"> <a href="#" class="block text-xs text-indigo-600 border-l-2 border-indigo-600 pl-4 py-1">Registry Handshake</a> <a href="#" class="block text-xs text-slate-400 border-l-2 border-transparent pl-4 py-1 hover:text-slate-900 transition-colors">Sector Verification</a> <a href="#" class="block text-xs text-slate-400 border-l-2 border-transparent pl-4 py-1 hover:text-slate-900 transition-colors">Consensus Affirmation</a> </nav> </aside> </div> </body> </html>
