---
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/tr/components/countdown
---

# Countdown Component

Geri sayım bileşenleri bir etkinliğin, son teslim tarihinin veya promosyonun sona ermesine kalan süreyi görüntüler. Animasyonlu sayısal ekranlarla oluşturulan geri sayımlar aciliyet ve beklenti yaratır. Frutjam geri sayım sistemi birden fazla boyutu, formatı ve stili destekler; flaş satışlar, etkinlik zamanlayıcıları, lansman geri sayımları ve sınırlı süreli teklifler için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf        | Tip   | Tanım                                                                  |
| ------------ | ----- | ---------------------------------------------------------------------- |
| countdown    | Temel | `--countdown-value` tarafından yönlendirilen animasyonlu sayısal rakam |
| countdown-xs | Boyut | Ekstra küçük                                                           |
| countdown-sm | Boyut | Küçük                                                                  |
| countdown-md | Boyut | Orta (varsayılan)                                                      |
| countdown-lg | Boyut | Büyük                                                                  |
| countdown-xl | Boyut | Ekstra büyük                                                           |

## Temel Kullanım

## Kutulu Stil

```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>
```

## Saat Formatı

```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>
```

## Geri Sayım Boyutları

```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>
```

## Canlı Geri Sayım

```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>
```

## Etkinlik Geri Sayımı

```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>
```