Inline Countdown Badge with 24-Hour Timer

<div
  class="inline-flex gap-2 text-xs text-rose-300 tracking-[0.15em] bg-white/5 border-white/10 border rounded-md mb-6 pt-2 pr-3 pb-2 pl-3 items-center">
  <span class="text-rose-300/80">ENDS IN</span>
  <span id="countdown" class="font-medium text-rose-200">01 : 00 : 00 : 00</span>
  <script>
    // Countdown: 24h from first load
    const el = document.getElementById('countdown');
    const end = new Date(Date.now() + 24 * 60 * 60 * 1000).getTime();
    const pad = (n) => String(n).padStart(2, '0');
    const tick = () => {
      const now = Date.now();
      const diff = Math.max(0, end - now);
      const d = Math.floor(diff / (24*60*60*1000));
      const h = Math.floor((diff % (24*60*60*1000)) / (60*60*1000));
      const m = Math.floor((diff % (60*60*1000)) / (60*1000));
      const s = Math.floor((diff % (60*1000)) / 1000);
      if (el) el.textContent = `${pad(d)} : ${pad(h)} : ${pad(m)} : ${pad(s)}`;
    };
    tick();
    setInterval(tick, 1000);
  </script>
</div>