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 Charts 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-16 p-6 antialiased"> <div class="max-w-7xl mx-auto space-y-8"> <div class="flex justify-between items-center"> <h2 class="text-3xl font-black text-slate-900 tracking-tight">Spectral Data Charts</h2> <div class="flex items-center gap-4"> <button class="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-600 hover:bg-slate-50 transition-all cursor-pointer"> <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" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg> Filter </button> <button class="px-6 py-2 bg-slate-900 text-white rounded-xl text-xs font-black uppercase tracking-widest hover:bg-slate-800 transition-all cursor-pointer">Generate Report</button> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <!-- Large Area Chart --> <div class="lg:col-span-2 bg-white rounded-[3rem] border border-slate-100 shadow-sm p-10 flex flex-col"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-10"> <div> <h4 class="text-lg font-bold text-slate-900">Synchronization Velocity</h4> <p class="text-sm text-slate-500">Real-time throughput analysis across major hubs.</p> </div> <div class="flex gap-2"> <div class="flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-600 rounded-lg text-[10px] font-black uppercase tracking-widest">Primary</div> <div class="flex items-center gap-1.5 px-3 py-1 bg-slate-50 text-slate-400 rounded-lg text-[10px] font-black uppercase tracking-widest">Mirror</div> </div> </div> <!-- Placeholder Chart --> <div class="flex-1 min-h-[300px] w-full bg-slate-50/50 rounded-[2rem] border border-slate-100 border-dashed flex items-end justify-between p-10 gap-2"> <div class="w-full bg-indigo-100 rounded-lg h-[40%]"></div> <div class="w-full bg-indigo-200 rounded-lg h-[60%]"></div> <div class="w-full bg-indigo-300 rounded-lg h-[45%]"></div> <div class="w-full bg-indigo-400 rounded-lg h-[80%] shadow-[0_0_15px_rgba(129,140,248,0.3)]"></div> <div class="w-full bg-indigo-200 rounded-lg h-[55%]"></div> <div class="w-full bg-indigo-100 rounded-lg h-[30%]"></div> <div class="w-full bg-indigo-300 rounded-lg h-[70%]"></div> <div class="w-full bg-indigo-500 rounded-lg h-[90%] shadow-[0_0_15px_rgba(99,102,241,0.4)]"></div> <div class="w-full bg-indigo-200 rounded-lg h-[40%]"></div> <div class="w-full bg-indigo-100 rounded-lg h-[25%]"></div> </div> </div> <!-- Doughnut / Status Chart --> <div class="bg-white rounded-[3rem] border border-slate-100 shadow-sm p-10 flex flex-col items-center text-center"> <h4 class="text-lg font-bold text-slate-900 mb-2">Protocol Distribution</h4> <p class="text-sm text-slate-500 mb-10">Sector-wide protocol allocation.</p> <!-- Doughnut Placeholder --> <div class="relative h-64 w-64 flex items-center justify-center mb-10"> <svg class="h-full w-full -rotate-90 transform" viewBox="0 0 100 100"> <!-- Background Circle --> <circle cx="50" cy="50" r="40" fill="transparent" stroke="#f1f5f9" stroke-width="12"></circle> <!-- Progress Circle (Emerald) --> <circle cx="50" cy="50" r="40" fill="transparent" stroke="#10b981" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="62.8"></circle> <!-- Progress Circle (Indigo) --> <circle cx="50" cy="50" r="40" fill="transparent" stroke="#6366f1" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="188.4"></circle> </svg> <div class="absolute flex flex-col items-center"> <span class="text-3xl font-black text-slate-900 tracking-tighter leading-none">84%</span> <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Active</span> </div> </div> <div class="w-full space-y-4"> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <span class="h-3 w-3 bg-indigo-500 rounded-full"></span> <span class="text-sm font-bold text-slate-700">Kinetic Sync</span> </div> <span class="text-sm font-black text-slate-900">62%</span> </div> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <span class="h-3 w-3 bg-emerald-500 rounded-full"></span> <span class="text-sm font-bold text-slate-700">Manifest Seal</span> </div> <span class="text-sm font-black text-slate-900">22%</span> </div> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <span class="h-3 w-3 bg-slate-200 rounded-full"></span> <span class="text-sm font-bold text-slate-700">Mirror Pulse</span> </div> <span class="text-sm font-black text-slate-900">16%</span> </div> </div> </div> <!-- Vertical Bar / Row Chart --> <div class="lg:col-span-3 bg-slate-900 rounded-[3rem] shadow-xl p-10 grid grid-cols-1 md:grid-cols-3 gap-12"> <div class="col-span-1 md:col-span-1 space-y-4"> <h4 class="text-xl font-bold text-white tracking-tight">Latency by Region</h4> <p class="text-sm text-slate-400">Response times across our global edge node mesh.</p> <div class="pt-6"> <button class="px-6 py-3 bg-white/10 hover:bg-white/20 border border-white/20 rounded-xl text-[10px] font-black text-white uppercase tracking-widest transition-all cursor-pointer">Sector Details</button> </div> </div> <div class="col-span-1 md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-8"> <div class="space-y-6"> <div> <div class="flex justify-between text-xs font-bold uppercase tracking-widest text-slate-500 mb-2"> <span>US East Apex</span> <span class="text-white">0.31ms</span> </div> <div class="h-2 bg-white/5 rounded-full"> <div class="h-full bg-indigo-500 rounded-full w-[31%]"></div> </div> </div> <div> <div class="flex justify-between text-xs font-bold uppercase tracking-widest text-slate-500 mb-2"> <span>EU Central Core</span> <span class="text-white">0.45ms</span> </div> <div class="h-2 bg-white/5 rounded-full"> <div class="h-full bg-emerald-500 rounded-full w-[45%]"></div> </div> </div> </div> <div class="space-y-6"> <div> <div class="flex justify-between text-xs font-bold uppercase tracking-widest text-slate-500 mb-2"> <span>Asia Pacific Hub</span> <span class="text-white">0.82ms</span> </div> <div class="h-2 bg-white/5 rounded-full"> <div class="h-full bg-amber-500 rounded-full w-[82%]"></div> </div> </div> <div> <div class="flex justify-between text-xs font-bold uppercase tracking-widest text-slate-500 mb-2"> <span>South America Mirror</span> <span class="text-white">1.12ms</span> </div> <div class="h-2 bg-white/5 rounded-full"> <div class="h-full bg-rose-500 rounded-full w-[95%]"></div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
