---
title: "Countdown"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Countdown for event launches, flash sales, and deadlines. Supports days, hours, minutes, and seconds with flexible, animated layouts."
url: https://frutjam.com/id/components/countdown
---

# Countdown Component

Komponen hitung mundur menampilkan sisa waktu hingga acara, tenggat waktu, atau promosi berakhir. Dibangun dengan tampilan numerik animasi, hitungan mundur menciptakan urgensi dan antisipasi. Sistem hitung mundur Frutjam mendukung berbagai ukuran, format, dan gaya—ideal untuk penjualan kilat, pengatur waktu acara, hitung mundur peluncuran, dan penawaran berbatas waktu.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas        | Jenis  | Keterangan                                                     |
| ------------ | ------ | -------------------------------------------------------------- |
| countdown    | Basis  | Digit numerik animasi yang digerakkan oleh `--countdown-value` |
| countdown-xs | Ukuran | Sangat kecil                                                   |
| countdown-sm | Ukuran | Kecil                                                          |
| countdown-md | Ukuran | Sedang (standar)                                               |
| countdown-lg | Ukuran | Besar                                                          |
| countdown-xl | Ukuran | Ekstra besar                                                   |

## Penggunaan Dasar

## Gaya Kotak

```html
<div class="grid auto-cols-max grid-flow-col gap-3 text-center">
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:2"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">days</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:18"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">hours</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:37"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">min</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-neutral text-on-neutral rounded-box flex items-center justify-center px-4 py-3 min-w-16">
      <span class="countdown font-mono text-4xl">
        <span style="--countdown-value:20"></span>
      </span>
    </div>
    <span class="text-xs uppercase tracking-widest text-on-base/60">sec</span>
  </div>
</div>
```

## Format Jam

```html
<span class="countdown font-mono text-6xl">
  <span style="--countdown-value:10"></span>:<span style="--countdown-value:24"></span>:<span style="--countdown-value:59"></span>
</span>
```

## Ukuran Hitung Mundur

```html
<div class="flex flex-col gap-6">
  <div class="grid auto-cols-max grid-flow-col gap-3 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xs font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-xs text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xs font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-xs text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xs font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-xs text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">xs</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-3 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-sm font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-xs text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-sm font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-xs text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-sm font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-xs text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">sm</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-4 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-md font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-xs text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-md font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-xs text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-md font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-xs text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">md</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-5 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-lg font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-sm text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-lg font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-sm text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-lg font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-sm text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">lg</span>
  </div>

  <div class="grid auto-cols-max grid-flow-col gap-6 text-center">
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xl font-mono"><span style="--countdown-value:10"></span></span>
      <span class="text-sm text-on-base/60">hours</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xl font-mono"><span style="--countdown-value:24"></span></span>
      <span class="text-sm text-on-base/60">min</span>
    </div>
    <div class="flex flex-col items-center">
      <span class="countdown countdown-xl font-mono"><span style="--countdown-value:5"></span></span>
      <span class="text-sm text-on-base/60">sec</span>
    </div>
    <span class="self-center text-xs text-on-base/40">xl</span>
  </div>
</div>
```

## Hitung Mundur Langsung

```html
<div class="grid auto-cols-max grid-flow-col gap-5 text-center" id="live-timer">
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-days" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">days</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-hours" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">hours</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-minutes" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">min</span>
  </div>
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span id="cd-seconds" style="--countdown-value:0"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">sec</span>
  </div>
</div>
<script>
const target = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000);

function update() {
  const diff = Math.max(0, target - Date.now());
  document.getElementById('cd-days').style.setProperty('--countdown-value', Math.floor(diff / 86400000));
  document.getElementById('cd-hours').style.setProperty('--countdown-value', Math.floor((diff % 86400000) / 3600000));
  document.getElementById('cd-minutes').style.setProperty('--countdown-value', Math.floor((diff % 3600000) / 60000));
  document.getElementById('cd-seconds').style.setProperty('--countdown-value', Math.floor((diff % 60000) / 1000));
}

update();
setInterval(update, 1000);
</script>
```

## Hitung Mundur Acara

```html
<div class="card bg-linear-to-br from-primary to-secondary shadow-lg max-w-sm">
  <div class="card-content">
    <p class="text-sm font-semibold uppercase tracking-widest text-white/80">Flash Sale Ends In</p>
    <h2 class="card-title text-2xl mt-1 text-white">Don't Miss Out!</h2>
    <div class="grid auto-cols-max grid-flow-col gap-4 text-center mt-4">
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:2"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">days</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:18"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">hours</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:37"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">min</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="bg-white/20 rounded-lg px-4 py-2 min-w-14">
          <span class="countdown font-mono text-4xl font-bold text-white">
            <span style="--countdown-value:20"></span>
          </span>
        </div>
        <span class="mt-1 text-xs text-white/75">sec</span>
      </div>
    </div>
  </div>
</div>
```