---
title: "Countdown"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
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/components/countdown
---

# Countdown Component

 Countdown components display time remaining until an event, deadline, or promotion ends. Built with animated numeric displays, countdowns create urgency and anticipation. The Frutjam countdown system supports multiple sizes, formats, and styling—ideal for flash sales, event timers, launch countdowns, and time-limited offers.

| Class        | Type | Description                                          |
| ------------ | ---- | ---------------------------------------------------- |
| countdown    | Base | Animated numeric digit driven by `--countdown-value` |
| countdown-xs | Size | Extra small                                          |
| countdown-sm | Size | Small                                                |
| countdown-md | Size | Medium (default)                                     |
| countdown-lg | Size | Large                                                |
| countdown-xl | Size | Extra large                                          |

## Basic Usage

## Boxed Style

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


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


## Countdown Sizes

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


## Live Countdown

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


## Event Countdown

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