Live badge

<div class="slide-badge">
  <span class="slide-badge__pill">
    <span class="slide-badge__dot"></span>Live
  </span>
</div>

<style>
.slide-badge {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-badge__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.18));
  border-radius: 999px;
  color: #e2e8f0;
  font-weight: 600;
  overflow: hidden;
}

.slide-badge__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22d3ee;
  animation: slidePulse 1.2s ease-in-out infinite;
}

@keyframes slidePulse {
  0% {
    transform: translateX(-4px) scale(0.9);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4);
  }
  50% {
    transform: translateX(6px) scale(1.05);
    box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.2);
  }
  100% {
    transform: translateX(-4px) scale(0.92);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4);
  }
}
</style>