Pulsing Status Badge

Một giao diện người dùng (chỉ báo) huy hiệu nhỏ truyền tải trực quan trạng thái thời gian thực, chẳng hạn như liệu người dùng hiện đang trực tuyến hay hệ thống có hoạt động bình thường hay không.Nó sử dụng hoạt ảnh CSS (hiệu ứng Ping/Pulse) khiến các gợn sóng lan ra ngoài từ các chấm bên trong.

Xem trước

System Operational

Live Streaming

Mã triển khai (Implementation)

<!-- Status: Online (Green) -->
<div class="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20 rounded-full">
<div class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
</div>
<span class="text-sm font-medium text-emerald-700 dark:text-emerald-400">System Operational</span>
</div>

<!-- Status: Live (Red) -->
<div class="flex items-center gap-2 px-3 py-1.5 bg-rose-50 dark:bg-rose-500/10 border border-rose-100 dark:border-rose-500/20 rounded-full">
<div class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-rose-500"></span>
</div>
<span class="text-sm font-medium text-rose-700 dark:text-rose-400">Live Streaming</span>
</div>