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 Footer 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 class="h-24 bg-white border-b border-slate-100 flex items-center justify-center sticky top-0 z-50"> <div class="text-xl font-black text-slate-900 tracking-tighter uppercase">Vanguard.Terminal</div> </header> <main class="flex-1 p-5 md:p-10 flex flex-col items-center"> <div class="max-w-3xl w-full bg-white p-12 md:p-10 rounded-[3rem] border border-slate-100 shadow-sm space-y-12"> <div class="space-y-4"> <p class="text-lg text-slate-500 font-medium leading-relaxed">This layout ensures the footer remains at the absolute bottom of the viewport even if the spectral content manifest is minimal.</p> </div> </div> </main> <footer class="bg-slate-900 text-white py-10 px-12"> <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-12"> <div class="col-span-2 space-y-4"> <div class="text-xl font-black tracking-tighter uppercase">Vanguard</div> <p class="text-slate-400 text-sm max-w-xs font-medium italic">"Sovereign data protocols for decentralized mesh collectives."</p> </div> <div class="space-y-4"> <h3 class="text-[11px] font-black text-indigo-400 uppercase tracking-widest">Sectors</h3> <nav class="space-y-2 flex flex-col"> <a href="#" class="text-xs font-bold text-slate-500 hover:text-white transition-colors">US-East-Alpha</a> <a href="#" class="text-xs font-bold text-slate-500 hover:text-white transition-colors">EU-West-Apex</a> </nav> </div> <div class="space-y-4"> <h3 class="text-[11px] font-black text-indigo-400 uppercase tracking-widest">Protocol</h3> <nav class="space-y-2 flex flex-col"> <a href="#" class="text-xs font-bold text-slate-500 hover:text-white transition-colors">Documentation</a> <a href="#" class="text-xs font-bold text-slate-500 hover:text-white transition-colors">Security Node</a> </nav> </div> </div> <div class="max-w-7xl mx-auto mt-5 pt-5 border-t border-white/5 text-center"> <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em]">© 2026 Vanguard Persist Sequence</p> </div> </footer> </body> </html>
