Metric Grid Statistics

Live Preview
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-12 text-center w-full">
        <div class="space-y-4">
            <p
                class="text-5xl font-black text-white tracking-tighter leading-none italic underline decoration-indigo-500 decoration-4">
                99.9%</p>
            <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.3em]">Uptime SLA</p>
        </div>
        <div class="space-y-4">
            <p
                class="text-5xl font-black text-white tracking-tighter leading-none italic underline decoration-cyan-400 decoration-4">
                120ms</p>
            <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.3em]">Avg Latency</p>
        </div>
        <div class="space-y-4">
            <p
                class="text-5xl font-black text-white tracking-tighter leading-none italic underline decoration-rose-500 decoration-4">
                4.2M</p>
            <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.3em]">Requests/day</p>
        </div>
        <div class="space-y-4">
            <p
                class="text-5xl font-black text-white tracking-tighter leading-none italic underline decoration-emerald-400 decoration-4">
                0.00%</p>
            <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.3em]">Data Loss</p>
        </div>
    </div>

Related components

More items from the merged UI library.

View all