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 List Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-screen pt-24 p-6 antialiased"> <div class="max-w-7xl mx-auto space-y-20"> <!-- Categories / Filter --> <div class="flex flex-col md:flex-row justify-between items-center gap-8 border-b border-slate-100 pb-12"> <div class="flex flex-wrap justify-center gap-2"> <button class="px-6 py-2.5 bg-slate-900 text-white rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl shadow-slate-200">All Manifests</button> <button class="px-6 py-2.5 bg-white border border-slate-100 text-slate-400 hover:text-slate-900 hover:border-slate-300 rounded-full text-[10px] font-black uppercase tracking-widest transition-all">Protocol Dev</button> <button class="px-6 py-2.5 bg-white border border-slate-100 text-slate-400 hover:text-slate-900 hover:border-slate-300 rounded-full text-[10px] font-black uppercase tracking-widest transition-all">Neural Mesh</button> <button class="px-6 py-2.5 bg-white border border-slate-100 text-slate-400 hover:text-slate-900 hover:border-slate-300 rounded-full text-[10px] font-black uppercase tracking-widest transition-all">Security</button> </div> <div class="relative w-full md:w-80"> <svg class="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> <input type="text" placeholder="Search insights..." class="w-full pl-12 pr-6 py-3 bg-white border border-slate-100 rounded-2xl text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> </div> <!-- Articles List --> <div class="space-y-12"> <!-- Horizontal Article 1 --> <article class="group flex flex-col lg:flex-row gap-12 bg-white p-6 lg:p-10 rounded-[4rem] border border-slate-50 shadow-sm hover:shadow-2xl transition-all duration-500 cursor-pointer items-center"> <div class="w-full lg:w-[45%] aspect-[16/10] overflow-hidden rounded-[3rem] shrink-0"> <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800&q=80" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-1000"> </div> <div class="flex-1 space-y-6"> <div class="flex items-center gap-4 text-[10px] font-black text-indigo-600 uppercase tracking-widest"> <span class="px-3 py-1 bg-indigo-50 rounded-lg">High-Level Design</span> <span class="text-slate-300">/</span> <span class="text-slate-400">Mar 10, 2026</span> </div> <h2 class="text-3xl lg:text-4xl font-black text-slate-900 tracking-tight leading-tight group-hover:text-indigo-600 transition-colors">Optimizing Spectral Alignment in Latency-Sensitive Nodes</h2> <p class="text-slate-500 text-lg leading-relaxed">A deep dive into the kinetic handshake protocols that define the next generation of neural mesh synchronization.</p> <div class="flex items-center gap-4 pt-4"> <div class="h-12 w-12 rounded-xl bg-slate-100 overflow-hidden grayscale group-hover:grayscale-0 transition-all"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100" class="h-full w-full object-cover"> </div> <div> <p class="text-sm font-bold text-slate-900 leading-tight">Alexander Sterling</p> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Lead Protocol Architect</p> </div> </div> </div> </article> <!-- Horizontal Article 2 --> <article class="group flex flex-col lg:flex-row-reverse gap-12 bg-white p-6 lg:p-10 rounded-[4rem] border border-slate-50 shadow-sm hover:shadow-2xl transition-all duration-500 cursor-pointer items-center"> <div class="w-full lg:w-[45%] aspect-[16/10] overflow-hidden rounded-[3rem] shrink-0"> <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&q=80" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-1000"> </div> <div class="flex-1 space-y-6"> <div class="flex items-center gap-4 text-[10px] font-black text-emerald-600 uppercase tracking-widest"> <span class="px-3 py-1 bg-emerald-50 rounded-lg">Security Manifest</span> <span class="text-slate-300">/</span> <span class="text-slate-400">Mar 08, 2026</span> </div> <h2 class="text-3xl lg:text-4xl font-black text-slate-900 tracking-tight leading-tight group-hover:text-emerald-600 transition-colors">Quantum Logic Seals in Distributed Cluster Authorization</h2> <p class="text-slate-500 text-lg leading-relaxed">Understanding the cryptographic foundations required to secure sub-cycle handshake sequences across regional hubs.</p> <div class="flex items-center gap-4 pt-4"> <div class="h-12 w-12 rounded-xl bg-slate-100 overflow-hidden grayscale group-hover:grayscale-0 transition-all"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100" class="h-full w-full object-cover"> </div> <div> <p class="text-sm font-bold text-slate-900 leading-tight">Sarah Jenkins</p> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Senior Security Architect</p> </div> </div> </div> </article> </div> <!-- Pagination --> <div class="flex justify-center pt-20"> <div class="bg-white p-2 rounded-2xl border border-slate-100 flex items-center gap-1 shadow-sm"> <button class="h-10 w-10 flex items-center justify-center rounded-xl text-slate-300 cursor-not-allowed"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7" /></svg> </button> <button class="h-10 w-10 flex items-center justify-center rounded-xl bg-slate-900 text-white text-[10px] font-black">01</button> <button class="h-10 w-10 flex items-center justify-center rounded-xl text-slate-400 hover:bg-slate-50 text-[10px] font-black transition-all">02</button> <button class="h-10 w-10 flex items-center justify-center rounded-xl text-slate-400 hover:bg-slate-50 text-[10px] font-black transition-all">03</button> <span class="px-2 text-slate-200">...</span> <button class="h-10 w-10 flex items-center justify-center rounded-xl text-slate-400 hover:bg-slate-50 transition-all"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" /></svg> </button> </div> </div> </div> </body> </html>
