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 Grid Landing 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"> <!-- Main Grid Layout --> <div class="grid grid-cols-1 md:grid-cols-12 gap-px bg-slate-200"> <!-- Block 1: Intro (Big Square) --> <header class="md:col-span-8 md:row-span-2 bg-indigo-600 p-12 md:p-32 text-white flex flex-col justify-between min-h-[50vh]"> <div class="text-2xl font-black tracking-tighter uppercase">Vanguard</div> <div class="space-y-8"> <h1 class="text-6xl md:text-8xl font-black tracking-tight leading-none">Architect <br>The Void.</h1> <p class="text-xl md:text-2xl text-indigo-200 leading-relaxed font-light italic max-w-xl">"A sovereign data protocol for decentralized mesh networks and spectral synchronization."</p> <div class="pt-8"> <button class="px-12 py-6 bg-white text-slate-900 rounded-[2rem] text-xs font-black uppercase tracking-[0.2em] shadow-2xl hover:bg-slate-900 hover:text-white transition-all">Initialise Apex Sync</button> </div> </div> </header> <!-- Block 2: Quick Stat (Small Square) --> <div class="md:col-span-4 bg-white p-12 flex flex-col justify-end min-h-[25vh]"> <div class="space-y-1"> <p class="text-5xl font-black text-slate-900 tracking-tighter">1.2ms</p> <p class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-300">Hub-to-hub latency</p> </div> </div> <!-- Block 3: Secondary Action (Small Square) --> <div class="md:col-span-4 bg-slate-900 p-12 text-white flex items-center group cursor-pointer hover:bg-indigo-600 transition-colors"> <div class="flex items-center justify-between w-full"> <span class="text-sm font-black uppercase tracking-[0.2em]">View Registry</span> <svg class="h-6 w-6 group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg> </div> </div> <!-- Block 4: Feature Focus (Mid Width) --> <div class="md:col-span-6 bg-white p-16 md:p-24 space-y-8 min-h-[40vh]"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Protocol Layer 02</span> <h2 class="text-4xl font-black text-slate-900 tracking-tight">Spectral Analysis</h2> <p class="text-slate-500 text-lg leading-relaxed font-bold">Deep packet inspection across distributed nodes using multi-signature consensus protocols.</p> </div> <!-- Block 5: Feature Focus (Mid Width) --> <div class="md:col-span-6 bg-gray-50 p-16 md:p-24 space-y-8 min-h-[40vh]"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Protocol Layer 03</span> <h2 class="text-4xl font-black text-slate-900 tracking-tight">Kinetic Routing</h2> <p class="text-slate-500 text-lg leading-relaxed font-bold">Dynamic mesh re-balancing that adapts in real-time to spectral interference patterns.</p> </div> <!-- Block 6: Footer Bar (Full Width) --> <footer class="md:col-span-12 bg-white border-t border-slate-200 py-12 px-12 text-center md:flex md:justify-between items-center"> <p class="text-[10px] font-black text-slate-300 uppercase tracking-[0.4em]">© 2026 Vanguard Network Protocols</p> <div class="hidden md:flex gap-12"> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Documentation</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Registry Hub</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Network Map</a> </div> </footer> </div> </body> </html>
