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 Dashboard Stats Cards</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-screen pt-16 p-6 antialiased"> <div class="max-w-7xl mx-auto space-y-12"> <div class="text-center"> <h2 class="text-3xl font-black text-slate-900 tracking-tight">System Performance Metrics</h2> <p class="text-slate-500 mt-2">Standalone logic indicators for neural mesh monitoring.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Standard Stat --> <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col justify-between h-48 group hover:border-indigo-100 transition-all"> <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Active Syncs</p> <div> <h3 class="text-4xl font-black text-slate-900 tracking-tight leading-none group-hover:text-indigo-600 transition-colors">12,402</h3> <p class="text-emerald-500 text-xs font-bold flex items-center gap-1 mt-4 bg-emerald-50 w-fit px-2 py-1 rounded-lg"> <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 15l7-7 7 7" /></svg> 12% vs last cycle </p> </div> </div> <!-- Progress Stat --> <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col justify-between h-48"> <div class="flex justify-between items-start"> <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Core Integrity</p> <div class="h-8 w-8 bg-indigo-50 text-indigo-600 rounded-lg flex items-center justify-center"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg> </div> </div> <div> <h3 class="text-4xl font-black text-slate-900 tracking-tight leading-none">99.9%</h3> <div class="mt-4 h-1.5 bg-slate-50 rounded-full overflow-hidden"> <div class="h-full bg-indigo-600 w-[99.9%] rounded-full shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div> </div> </div> </div> <!-- Dark Featured Stat --> <div class="bg-slate-900 p-8 rounded-[2rem] shadow-xl shadow-slate-200/50 flex flex-col justify-between h-48 relative overflow-hidden group"> <div class="absolute -top-10 -right-10 h-32 w-32 bg-indigo-600/20 rounded-full blur-2xl group-hover:bg-indigo-600/40 transition-all"></div> <p class="text-[11px] font-bold text-slate-500 uppercase tracking-widest relative">Spectral Latency</p> <div class="relative"> <h3 class="text-4xl font-black text-white tracking-tighter leading-none italic">0.42ms</h3> <p class="text-indigo-400 text-xs font-bold flex items-center gap-1 mt-4"> Optimal Sync Range </p> </div> </div> <!-- Comparison Stat --> <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col justify-between h-48"> <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Protocol Hubs</p> <div class="space-y-4"> <div class="flex items-end justify-between"> <h3 class="text-4xl font-black text-slate-900 tracking-tight leading-none">84</h3> <span class="text-[10px] font-black text-slate-300 uppercase tracking-widest mb-1 italic">Nodes Online</span> </div> <div class="flex -space-x-2"> <div class="h-6 w-6 rounded-full bg-indigo-100 border-2 border-white overflow-hidden"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop" class="h-full w-full object-cover"> </div> <div class="h-6 w-6 rounded-full bg-emerald-100 border-2 border-white overflow-hidden"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=64&h=64&fit=crop" class="h-full w-full object-cover"> </div> <div class="h-6 w-6 rounded-full bg-amber-100 border-2 border-white overflow-hidden"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop" class="h-full w-full object-cover"> </div> <div class="h-6 w-6 rounded-full bg-slate-900 text-white border-2 border-white flex items-center justify-center text-[8px] font-bold">+81</div> </div> </div> </div> </div> </div> </body> </html>
