Countdown

Countdown gir en overgangseffekt når du endrer en tall mellom 0 og 99.

15 days

14 hours

13 min

12 sec

<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="font-mono text-5xl">
      <span id="days" style="--value:15;" aria-live="polite" aria-label="15">15</span>
    </span>
    days
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="countdown font-mono text-5xl">
      <span id="hours" style="--value:14;" aria-live="polite" aria-label="14">14</span>
    </span>
    hours
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="countdown font-mono text-5xl">
      <span id="mins" style="--value:13;" aria-live="polite" aria-label="13">13</span>
    </span>
    min
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="countdown font-mono text-5xl">
      <span id="secs" style="--value:12;" aria-live="polite" aria-label="12">12</span>
    </span>
    sec
  </div>
</div>

Forige Collapse

Neste Diff