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 Basic Centered 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 --> <header class="bg-white border-b border-slate-100"> <div class="max-w-5xl mx-auto px-6 h-20 flex items-center justify-between"> <div class="text-xl font-black text-slate-900 tracking-tighter">VANGUARD</div> <nav class="hidden md:flex gap-8"> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-indigo-600 transition-colors">Manifest</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-indigo-600 transition-colors">Sectors</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-indigo-600 transition-colors">Nodes</a> </nav> <button class="px-5 py-2 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest">Initialise</button> </div> </header> <!-- Main Content --> <main class="flex-1"> <div class="max-w-5xl mx-auto px-6 py-20"> <div class="bg-white p-12 md:p-20 rounded-[4rem] border border-slate-100 shadow-sm space-y-8"> <div class="space-y-4"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Layout Pattern: 01</span> <h1 class="text-4xl md:text-6xl font-black text-slate-900 tracking-tight leading-none">Centered Manifest</h1> <p class="text-slate-500 text-lg leading-relaxed max-w-2xl font-medium">This layout pattern focuses the user's attention on a central content column, ideal for high-readability manifests and single-objective sequences.</p> </div> <div class="pt-10 grid grid-cols-1 md:grid-cols-2 gap-10"> <div class="h-64 bg-slate-50 rounded-[3rem] border border-slate-100"></div> <div class="h-64 bg-slate-50 rounded-[3rem] border border-slate-100"></div> </div> <div class="h-96 bg-slate-50 rounded-[3rem] border border-slate-100"></div> </div> </div> </main> <!-- Footer --> <footer class="bg-white border-t border-slate-100 py-12"> <div class="max-w-5xl mx-auto px-6 text-center"> <p class="text-[10px] font-black text-slate-300 uppercase tracking-[0.4em]">© 2026 Vanguard Network Protocols</p> </div> </footer> </body> </html>
