Server Health Grid

<div class="w-full max-w-4xl mx-auto font-sans">
        <div class="flex justify-between items-center mb-10">
            <div>
                <h3 class="text-xl font-bold text-white italic tracking-tighter uppercase">Cluster Topology</h3>
                <p class="text-xs text-zinc-500">Live health monitoring across global data centers.</p>
            </div>
            <div class="flex items-center gap-6">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div>
                    <span class="text-[10px] font-bold text-zinc-400">Active</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-rose-500"></div>
                    <span class="text-[10px] font-bold text-zinc-400">Error</span>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-8 md:grid-cols-12 gap-3">
            <script>
                for (let i = 0; i < 48; i++) {
                    const status = Math.random() > 0.05 ? 'bg-emerald-500/20 text-emerald-500 border-emerald-500/30' : 'bg-rose-500/20 text-rose-500 border-rose-500/30 animate-pulse';
                    document.write(`<div class="aspect-square border rounded-md ${status} flex items-center justify-center text-[8px] font-bold cursor-help hover:scale-110 transition-transform">${i + 1}</div>`);
                }
            </script>
        </div>
        <div class="mt-10 p-4 bg-zinc-900 rounded-xl border border-zinc-800 flex items-center justify-between">
            <div class="text-xs font-bold text-zinc-400">Overall Cluster Health</div>
            <div class="flex gap-1">
                <div class="h-4 w-1 bg-emerald-500"></div>
                <div class="h-4 w-1 bg-emerald-500"></div>
                <div class="h-4 w-1 bg-emerald-500"></div>
                <div class="h-4 w-1 bg-emerald-500"></div>
                <div class="h-4 w-1 bg-rose-500"></div>
                <div class="h-4 w-1 bg-emerald-500"></div>
                <div class="h-4 w-1 bg-emerald-500"></div>
                <span class="text-xs font-bold text-white ml-2">98.4%</span>
            </div>
        </div>
    </div>