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 Responsive Grid 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-16 text-center space-y-4 px-6"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Integrated Hubs</span> <h1 class="text-4xl md:text-6xl font-black text-slate-900 tracking-tighter uppercase leading-none">Responsive Registry</h1> <p class="text-slate-500 font-medium text-lg leading-relaxed max-w-xl mx-auto">A multi-adaptive grid structure that re-calculates sector density based on viewing coordinates.</p> </header> <main class="flex-1 max-w-7xl mx-auto w-full px-6 pb-24"> <!-- Dynamic Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> <!-- Large Block (Spans columns on medium sizes) --> <div class="sm:col-span-2 lg:col-span-1 xl:col-span-2 h-72 bg-slate-900 rounded-[3rem] p-12 text-white flex flex-col justify-between shadow-2xl shadow-slate-900/30"> <div class="h-10 w-10 bg-indigo-600 rounded-2xl"></div> <div> <h3 class="text-3xl font-black tracking-tight leading-none uppercase">Apex Node US-EAST-01</h3> <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mt-2">Primary Spectral Seed</p> </div> </div> <div class="h-72 bg-white rounded-[3rem] border border-slate-100 shadow-sm p-10 flex flex-col items-center justify-center text-center space-y-6"> <div class="h-16 w-16 bg-slate-50 rounded-[2rem] flex items-center justify-center text-slate-400"><svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg></div> <p class="text-[9px] font-black uppercase tracking-[0.4em] text-slate-900 leading-none">Sync. Protocol</p> </div> <div class="h-72 bg-white rounded-[3rem] border border-slate-100 shadow-sm p-10 flex flex-col items-center justify-center text-center space-y-6"> <div class="h-16 w-16 bg-slate-50 rounded-[2rem] flex items-center justify-center text-slate-400"><svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg></div> <p class="text-[9px] font-black uppercase tracking-[0.4em] text-slate-900 leading-none">Security. Hub</p> </div> <div class="lg:col-span-2 xl:col-span-1 h-72 bg-indigo-600 rounded-[3rem] p-12 text-white flex flex-col justify-between shadow-2xl shadow-indigo-600/30"> <p class="text-[9px] font-black text-indigo-200 uppercase tracking-widest leading-none">Global Registry Coverage</p> <div class="space-y-2"> <span class="text-5xl font-black tracking-tighter leading-none">99.8%</span> <p class="text-[9px] font-black uppercase tracking-widest opacity-60">Verified Node Affirmation</p> </div> </div> <div class="xl:col-span-3 h-72 bg-white rounded-[3rem] border border-slate-100 shadow-sm p-12 flex items-center gap-12 group"> <div class="flex-1 space-y-4"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Spectral Analysis</span> <h3 class="text-3xl font-black text-slate-900 tracking-tight leading-none italic">The decentralized future is mathematically secure.</h3> </div> <button class="h-20 w-20 rounded-[2.5rem] bg-slate-900 text-white flex items-center justify-center hover:bg-indigo-600 transition-colors cursor-pointer group-hover:scale-110 duration-500 shadow-xl shadow-slate-900/10"><svg class="h-8 w-8" 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></button> </div> <div class="h-72 bg-slate-200/50 rounded-[3rem] border-2 border-dashed border-slate-300"></div> </div> </main> </body> </html>
