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 Blog Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex flex-col min-h-screen antialiased"> <header class="py-12 flex flex-col items-center gap-8 px-6"> <div class="text-3xl font-black tracking-tighter uppercase text-slate-900 leading-none">Vanguard Dispatch</div> <nav class="flex flex-wrap justify-center gap-x-12 gap-y-4"> <a href="#" class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Protocols</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.4em] hover:text-slate-900 transition-colors">Infrastructure</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.4em] hover:text-slate-900 transition-colors">Manifesto</a> <a href="#" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.4em] hover:text-slate-900 transition-colors">Ecosystem</a> </nav> </header> <main class="flex-1 max-w-6xl mx-auto w-full px-6 space-y-24 pb-32"> <!-- Featured Post --> <article class="group relative bg-white rounded-[4rem] border border-slate-100 shadow-sm overflow-hidden flex flex-col lg:flex-row hover:shadow-2xl transition-all duration-700"> <div class="lg:w-1/2 aspect-[4/3] lg:aspect-auto bg-slate-900 relative"> <div class="absolute inset-0 bg-indigo-600/10 mix-blend-overlay"></div> </div> <div class="lg:w-1/2 p-12 md:p-20 flex flex-col justify-center space-y-8"> <div class="space-y-4"> <div class="flex items-center gap-4"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-widest bg-indigo-50 px-4 py-1.5 rounded-full">Spotlight</span> <time class="text-[10px] font-black text-slate-300 uppercase tracking-widest">March 12, 2026</time> </div> <h2 class="text-4xl md:text-5xl font-black text-slate-900 tracking-tight leading-none group-hover:text-indigo-600 transition-colors">The Sovereign Mesh: A Vision for Decentralized Sync</h2> <p class="text-lg text-slate-500 font-medium leading-relaxed">Exploring the architectural shift from centralized hubs to collective spectral layers in modern infrastructure.</p> </div> <div class="pt-4 flex items-center gap-4"> <div class="h-12 w-12 bg-slate-900 rounded-2xl flex items-center justify-center text-[10px] font-black text-white">AZ</div> <div> <p class="text-[10px] font-black text-slate-900 uppercase tracking-widest leading-none">Architect Zero</p> <p class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-1">Core Council</p> </div> </div> </div> </article> <!-- Blog Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12"> <article class="space-y-6 group cursor-pointer"> <div class="h-64 bg-slate-900 rounded-[2.5rem] relative overflow-hidden"> <div class="absolute inset-0 scale-110 group-hover:scale-100 transition-transform duration-700 bg-indigo-600/5"></div> </div> <div class="space-y-3"> <time class="text-[9px] font-black text-slate-300 uppercase tracking-widest">March 08, 2026</time> <h3 class="text-xl font-black text-slate-900 leading-tight group-hover:text-indigo-600 transition-colors">Dynamic Re-balancing Protocols in US-EAST sectors.</h3> <p class="text-sm text-slate-500 font-medium line-clamp-2">How Vanguard is adapting to regional latency fluctuations through kinetic mesh adjustments.</p> </div> </article> <article class="space-y-6 group cursor-pointer"> <div class="h-64 bg-slate-900 rounded-[2.5rem] relative overflow-hidden"> <div class="absolute inset-0 scale-110 group-hover:scale-100 transition-transform duration-700 bg-indigo-600/5"></div> </div> <div class="space-y-3"> <time class="text-[9px] font-black text-slate-300 uppercase tracking-widest">March 04, 2026</time> <h3 class="text-xl font-black text-slate-900 leading-tight group-hover:text-indigo-600 transition-colors">Spectral Analysis: Defining the Alpha Standard.</h3> <p class="text-sm text-slate-500 font-medium line-clamp-2">Standardizing deep packet inspection across the distributed collective registry.</p> </div> </article> <article class="space-y-6 group cursor-pointer"> <div class="h-64 bg-slate-900 rounded-[2.5rem] relative overflow-hidden"> <div class="absolute inset-0 scale-110 group-hover:scale-100 transition-transform duration-700 bg-indigo-600/5"></div> </div> <div class="space-y-3"> <time class="text-[9px] font-black text-slate-300 uppercase tracking-widest">Feb 28, 2026</time> <h3 class="text-xl font-black text-slate-900 leading-tight group-hover:text-indigo-600 transition-colors">Apex Node Affiliation: A New Security Index.</h3> <p class="text-sm text-slate-500 font-medium line-clamp-2">Improving multi-node affirmation through rigorous affiliation metrics.</p> </div> </article> </div> <!-- Pagination --> <nav class="flex justify-center items-center gap-6 pt-12 border-t border-slate-100"> <button class="h-12 w-12 rounded-2xl border border-slate-100 flex items-center justify-center text-slate-300 hover:border-slate-900 hover:text-slate-900 transition-all cursor-pointer"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" /></svg></button> <div class="flex gap-3"> <span class="h-12 w-12 rounded-2xl bg-indigo-600 text-white flex items-center justify-center text-[10px] font-black uppercase">01</span> <span class="h-12 w-12 rounded-2xl border border-slate-100 text-slate-400 flex items-center justify-center text-[10px] font-black uppercase hover:bg-slate-50 cursor-pointer">02</span> <span class="h-12 w-12 rounded-2xl border border-slate-100 text-slate-400 flex items-center justify-center text-[10px] font-black uppercase hover:bg-slate-50 cursor-pointer">03</span> </div> <button class="h-12 w-12 rounded-2xl border border-slate-100 flex items-center justify-center text-slate-300 hover:border-slate-900 hover:text-slate-900 transition-all cursor-pointer"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg></button> </nav> </main> <footer class="bg-white border-t border-slate-100 py-16 px-6 text-center"> <div class="max-w-xl mx-auto space-y-8"> <h3 class="text-2xl font-black text-slate-900 tracking-tighter uppercase leading-none">Dispatch Hub</h3> <p class="text-slate-400 text-sm font-medium leading-relaxed">Receive the latest protocol updates and architectural visions directly in your terminal registry.</p> <div class="flex gap-3"> <input type="email" placeholder="terminal@hub.com" class="flex-1 bg-slate-50 border border-slate-100 px-8 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest outline-none focus:border-indigo-600 transition-all"> <button class="px-10 py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-xl shadow-slate-900/20 hover:bg-indigo-600 transition-all">Sync</button> </div> </div> </footer> </body> </html>
