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 Masonry Grid Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-24 p-6 antialiased"> <div class="max-w-7xl w-full flex flex-col gap-12"> <div class="space-y-2 border-b border-slate-200 pb-12"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Layout Pattern: 13</span> <h1 class="text-5xl font-black text-slate-900 tracking-tighter uppercase leading-none">Masonry Spectrum</h1> <p class="text-slate-500 font-medium text-lg leading-relaxed">A kinetic grid for varying content volumes, utilizing multi-column flow for a seamless visual experience.</p> </div> <div class="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-8"> <div class="break-inside-avoid mb-8 bg-slate-900 rounded-[3rem] p-12 text-white space-y-4 shadow-xl"> <span class="text-[9px] font-black uppercase tracking-widest text-indigo-400">Node Hub Alpha</span> <p class="text-xl font-black tracking-tight leading-none">Spectral sequence verified across 1,200 regional mirror nodes.</p> </div> <div class="break-inside-avoid mb-8 bg-white border border-slate-100 rounded-[3rem] p-10 shadow-sm space-y-6"> <div class="h-44 bg-slate-50 rounded-3xl"></div> <p class="text-sm font-bold text-slate-500 leading-relaxed italic">"Decentralization is not just a protocol, it is the sovereign imperative of modern infrastructure."</p> </div> <div class="break-inside-avoid mb-8 bg-indigo-600 rounded-[3rem] p-12 text-white shadow-2xl shadow-indigo-600/20"> <h3 class="text-3xl font-black tracking-tighter leading-none mb-6">99.98%</h3> <p class="text-[10px] font-black uppercase tracking-widest leading-relaxed">Mesh integrity threshold maintained during US-EAST re-balancing.</p> </div> <div class="break-inside-avoid mb-8 bg-white border border-slate-100 rounded-[3rem] p-10 shadow-sm space-y-4"> <div class="h-10 w-10 bg-slate-900 rounded-xl"></div> <p class="text-lg font-black text-slate-900 italic">Vanguard.Docs</p> </div> <div class="break-inside-avoid mb-8 bg-slate-50 border border-slate-500 border-dashed rounded-[3rem] h-64 flex items-center justify-center text-slate-300 font-mono text-[10px] uppercase tracking-widest">Spectral Void Area</div> <div class="break-inside-avoid mb-8 bg-white border border-slate-100 rounded-[4rem] p-12 shadow-sm space-y-8"> <div class="h-2 w-full bg-slate-100 rounded-full overflow-hidden"><div class="h-full w-2/3 bg-indigo-600 rounded-full"></div></div> <p class="text-xs font-black text-slate-900 uppercase tracking-widest">Protocol Sync Status</p> </div> </div> </div> </body> </html>
