Countdown Offer

<!--
  A live countdown. The numbers carry a pulse that is switched off under
  prefers-reduced-motion via motion-reduce:animate-none - the clock still ticks,
  it just stops throbbing. The four units wrap and never overflow at 320px. A
  visually-hidden aria-live line narrates the remaining time; the ticks are
  driven by the React/TS variants.
-->
<section class="w-full rounded-2xl border border-gray-200 bg-white p-6 text-center sm:p-8 dark:border-gray-800 dark:bg-gray-900">
  <h2 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl dark:text-gray-100">Spring sale ends soon</h2>
  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Every annual plan is 30% off until the timer runs out.</p>
  <ul class="mt-6 flex flex-wrap items-stretch justify-center gap-2 sm:gap-3" aria-hidden="true">
    <li class="flex min-w-16 flex-1 flex-col items-center rounded-xl bg-gray-100 px-2 py-3 dark:bg-gray-800">
      <span class="text-2xl font-bold tabular-nums text-gray-900 motion-safe:animate-pulse motion-reduce:animate-none sm:text-3xl dark:text-gray-100">02</span>
      <span class="mt-1 text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Days</span>
    </li>
    <!-- Hours, Minutes, Seconds repeat -->
  </ul>
  <a
    href="#"
    class="mt-6 inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none sm:w-auto dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900"
  >
    Shop the sale
  </a>
</section>