Status Badge Set

<div style="display:flex;gap:10px;flex-wrap:wrap">
  <span class="badge badge-online"><span class="dot"></span> Online</span>
  <span class="badge badge-away"><span class="dot"></span> Away</span>
  <span class="badge badge-offline"><span class="dot"></span> Offline</span>
</div>

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.badge-online {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
}
.badge-online .dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
  animation: pulse-dot 2s ease-in-out infinite;
}
.badge-away {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}
.badge-away .dot { background: #fbbf24; }
.badge-offline {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
}
.badge-offline .dot { background: rgba(255,255,255,0.3); }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.05); }
}