Countdown Pill

<div class="nuda-countpill">
  <span class="nuda-countpill__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="13" r="9" />
      <path d="M12 9v4l2 2" />
      <path d="M9 2h6" />
    </svg>
  </span>
  <span class="nuda-countpill__num"><b>3</b>d</span>
  <span class="nuda-countpill__num"><b>14</b>h</span>
  <span class="nuda-countpill__num"><b>22</b>m</span>
</div>

.nuda-countpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 99px;
  color: #a0a0a8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.nuda-countpill__icon {
  display: inline-flex;
  color: #e4ff54;
  animation: _countTick 1s steps(60) infinite;
}

.nuda-countpill__icon svg {
  width: 14px;
  height: 14px;
}

.nuda-countpill__num b {
  color: #fafafa;
  font-weight: 700;
  font-size: 13px;
  margin-right: 1px;
}

@keyframes _countTick {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-countpill__icon {
    animation: none;
  }
}