Activity Feed

<div class="w-full max-w-md mx-auto font-sans">
        <div class="flex items-center justify-between mb-6">
            <h4 class="text-sm font-black text-white uppercase tracking-tighter italic">System Activity</h4>
            <span class="px-2 py-0.5 bg-emerald-500/10 text-emerald-500 text-[10px] font-bold rounded">LIVE</span>
        </div>
        <div class="space-y-0.5 border-l border-zinc-800 ml-2">
            <div class="relative pl-6 py-4 hover:bg-zinc-900 transition-all group">
                <div
                    class="absolute left-[-5px] top-6 w-2.5 h-2.5 rounded-full bg-zinc-800 group-hover:bg-indigo-500 group-hover:shadow-[0_0_8px_#6366f1] transition-all">
                </div>
                <div class="text-xs text-zinc-500 mb-1">12:42:04 PM</div>
                <div class="text-sm text-zinc-300 font-medium">New deployment <span
                        class="text-indigo-400 font-mono text-xs">#9x-241</span> successful in <span
                        class="text-white">us-east-1</span></div>
            </div>
            <div class="relative pl-6 py-4 hover:bg-zinc-900 transition-all group">
                <div
                    class="absolute left-[-5px] top-6 w-2.5 h-2.5 rounded-full bg-zinc-800 group-hover:bg-rose-500 group-hover:shadow-[0_0_8px_#f43f5e] transition-all">
                </div>
                <div class="text-xs text-zinc-500 mb-1">11:15:32 AM</div>
                <div class="text-sm text-zinc-300 font-medium">Anomaly detected in <span
                        class="text-rose-400">Vector-DB-Primary</span>. Auto-failover initiated.</div>
            </div>
            <div class="relative pl-6 py-4 hover:bg-zinc-900 transition-all group">
                <div
                    class="absolute left-[-5px] top-6 w-2.5 h-2.5 rounded-full bg-zinc-800 group-hover:bg-amber-500 group-hover:shadow-[0_0_8px_#f59e0b] transition-all">
                </div>
                <div class="text-xs text-zinc-500 mb-1">09:02:11 AM</div>
                <div class="text-sm text-zinc-300 font-medium">Monthly usage limit exceeded for user <span
                        class="text-white">dev_marcus</span>.</div>
            </div>
        </div>
    </div>