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 Analytics Dashboard</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-8"> <!-- Header --> <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6"> <div> <h2 class="text-3xl font-black text-slate-900 tracking-tight">Analytics Manifest</h2> <p class="text-slate-500 mt-1 font-medium">Real-time spectral analysis of your global synchronization clusters.</p> </div> <div class="flex items-center gap-3"> <div class="bg-white p-1 rounded-xl border border-slate-200 shadow-sm flex items-center gap-1"> <button class="px-4 py-2 bg-slate-900 text-white rounded-lg text-xs font-bold transition-all cursor-pointer">Live</button> <button class="px-4 py-2 text-slate-500 hover:bg-slate-50 rounded-lg text-xs font-bold transition-all cursor-pointer">24h</button> <button class="px-4 py-2 text-slate-500 hover:bg-slate-50 rounded-lg text-xs font-bold transition-all cursor-pointer">7d</button> </div> <button class="px-6 py-3 bg-indigo-600 text-white rounded-xl text-xs font-black uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 cursor-pointer">Export Logs</button> </div> </div> <!-- Stats Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm space-y-4"> <div class="flex items-center justify-between"> <div class="h-10 w-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center"> <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="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <span class="text-emerald-500 text-xs font-bold flex items-center gap-1 bg-emerald-50 px-2 py-1 rounded-lg"> +12.4% <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> </span> </div> <div> <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Neural Latency</p> <h3 class="text-3xl font-black text-slate-900 tracking-tight mt-1">0.42ms</h3> </div> </div> <div class="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm space-y-4"> <div class="flex items-center justify-between"> <div class="h-10 w-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center"> <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 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> <span class="text-slate-400 text-xs font-bold flex items-center gap-1 bg-slate-50 px-2 py-1 rounded-lg"> Steady </span> </div> <div> <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Manifest Seal</p> <h3 class="text-3xl font-black text-slate-900 tracking-tight mt-1">100%</h3> </div> </div> <div class="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm space-y-4"> <div class="flex items-center justify-between"> <div class="h-10 w-10 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center"> <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> </div> <span class="text-rose-500 text-xs font-bold flex items-center gap-1 bg-rose-50 px-2 py-1 rounded-lg"> -2.1% <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="M19 9l-7 7-7-7" /></svg> </span> </div> <div> <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Mesh Throughput</p> <h3 class="text-3xl font-black text-slate-900 tracking-tight mt-1">4.2 TB/s</h3> </div> </div> <div class="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm space-y-4"> <div class="flex items-center justify-between"> <div class="h-10 w-10 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center"> <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg> </div> <span class="text-emerald-500 text-xs font-bold flex items-center gap-1 bg-emerald-50 px-2 py-1 rounded-lg"> +842 </span> </div> <div> <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Active Nodes</p> <h3 class="text-3xl font-black text-slate-900 tracking-tight mt-1">12,402</h3> </div> </div> </div> <!-- Main Analytics Section --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <!-- Large Chart Area --> <div class="lg:col-span-2 bg-white rounded-[3rem] border border-slate-100 shadow-sm p-10 space-y-10"> <div class="flex items-center justify-between"> <h4 class="text-xl font-bold text-slate-900">Synchronization Matrix</h4> <div class="flex items-center gap-6"> <div class="flex items-center gap-2"> <span class="h-2 w-2 bg-indigo-500 rounded-full"></span> <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Primary Core</span> </div> <div class="flex items-center gap-2"> <span class="h-2 w-2 bg-slate-200 rounded-full"></span> <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Mirror Hub</span> </div> </div> </div> <div class="aspect-video bg-slate-50/50 rounded-[2rem] border border-slate-100 border-dashed flex items-center justify-center"> <p class="text-sm font-bold text-slate-300 uppercase tracking-[0.2em]">Data Visualization Environment</p> </div> </div> <!-- Sector Usage --> <div class="bg-white rounded-[3rem] border border-slate-100 shadow-sm p-10 space-y-8"> <h4 class="text-xl font-bold text-slate-900">Sector Priority</h4> <div class="space-y-6"> <!-- Sector 1 --> <div class="space-y-2"> <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest"> <span class="text-slate-500">Sector 01 Alpha</span> <span class="text-slate-900">84%</span> </div> <div class="h-2 bg-slate-100 rounded-full overflow-hidden"> <div class="h-full bg-indigo-600 rounded-full" style="width: 84%"></div> </div> </div> <!-- Sector 2 --> <div class="space-y-2"> <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest"> <span class="text-slate-500">Sector 04 Core</span> <span class="text-slate-900">62%</span> </div> <div class="h-2 bg-slate-100 rounded-full overflow-hidden"> <div class="h-full bg-emerald-500 rounded-full" style="width: 62%"></div> </div> </div> <!-- Sector 3 --> <div class="space-y-2"> <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest"> <span class="text-slate-500">Regional Mirror</span> <span class="text-slate-900">41%</span> </div> <div class="h-2 bg-slate-100 rounded-full overflow-hidden"> <div class="h-full bg-amber-500 rounded-full" style="width: 41%"></div> </div> </div> <!-- Sector 4 --> <div class="space-y-2"> <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest"> <span class="text-slate-500">Legacy Hub</span> <span class="text-slate-900">12%</span> </div> <div class="h-2 bg-slate-100 rounded-full overflow-hidden"> <div class="h-full bg-rose-500 rounded-full" style="width: 12%"></div> </div> </div> </div> <div class="pt-4"> <button class="w-full py-4 bg-slate-50 text-slate-900 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 hover:text-white transition-all cursor-pointer">Rebalance Metrics</button> </div> </div> </div> </div> </body> </html>
