Countdown Alert

<!--
  A live countdown to a deadline. The digits tick every second, which is exactly
  what must NOT be announced tick-by-tick, so the timer is aria-hidden and a
  single aria-live="polite" region carries a coarse, human summary ("about 2
  hours left") that updates rarely. The tabular-nums class stops the width from
  jittering as digits change - no layout shift, nothing to trip motion-reduce.
  See React/TypeScript for the clock; static HTML can't count down.
-->
<div class="flex flex-col gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3.5 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100 sm:flex-row sm:items-center sm:justify-between" role="status">
  <div class="flex items-start gap-2.5">
    <svg class="mt-px h-[1.125rem] w-[1.125rem] flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 4a1 1 0 1 0-2 0v4a1 1 0 0 0 .4.8l2.5 2a1 1 0 1 0 1.2-1.6L11 9.5V6Z" />
    </svg>
    <p class="min-w-0 text-sm font-semibold">Early-bird pricing ends soon</p>
  </div>
  <div class="flex flex-none gap-2 pl-[1.625rem] sm:pl-0" aria-hidden="true">
    <span class="flex min-w-[2.75rem] flex-col items-center rounded-md bg-white px-2 py-1 tabular-nums dark:bg-amber-900/50">
      <span class="text-base font-bold leading-none">02</span>
      <span class="mt-0.5 text-[0.625rem] font-medium uppercase tracking-wide opacity-70">hrs</span>
    </span>
    <span class="flex min-w-[2.75rem] flex-col items-center rounded-md bg-white px-2 py-1 tabular-nums dark:bg-amber-900/50">
      <span class="text-base font-bold leading-none">14</span>
      <span class="mt-0.5 text-[0.625rem] font-medium uppercase tracking-wide opacity-70">min</span>
    </span>
    <span class="flex min-w-[2.75rem] flex-col items-center rounded-md bg-white px-2 py-1 tabular-nums dark:bg-amber-900/50">
      <span class="text-base font-bold leading-none">08</span>
      <span class="mt-0.5 text-[0.625rem] font-medium uppercase tracking-wide opacity-70">sec</span>
    </span>
  </div>
  <span class="sr-only" aria-live="polite">About 2 hours left.</span>
</div>