Skip to main content
Frutjam logo Frutjam
v2.2.1
Theme

Countdown Component

A flexible countdown timer component built with Tailwind CSS for displaying time-sensitive data. Perfect for product launches, event countdowns, and limited-time offers. Supports days, hours, minutes, and seconds in multiple layout styles for engaging, urgency-driven time displays.

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
countdownBaseAnimated numeric digit driven by --countdown-value
countdown-xsSizeExtra small
countdown-smSizeSmall
countdown-mdSizeMedium (default)
countdown-lgSizeLarge
countdown-xlSizeExtra large

Basic Usage

days
hours
min
sec 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
  <div class="flex flex-col items-center">
    <span class="countdown font-mono text-5xl">
      <span style="--countdown-value:15"></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 style="--countdown-value:10"></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 style="--countdown-value:24"></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 style="--countdown-value:5"></span>
    </span>
    <span class="mt-1 text-sm text-on-base/60">sec</span>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function BasicCountdown() {
  const days    = {"--countdown-value": 15}
  const hours   = {"--countdown-value": 10}
  const minutes = {"--countdown-value": 24}
  const seconds = {"--countdown-value": 5}
  return (
    <div className="grid auto-cols-max grid-flow-col gap-5 text-center">
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={days}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">days</span>
      </div>
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={hours}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">hours</span>
      </div>
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={minutes}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">min</span>
      </div>
      <div className="flex flex-col items-center">
        <span className="countdown font-mono text-5xl">
          <span style={seconds}></span>
        </span>
        <span className="mt-1 text-sm text-on-base/60">sec</span>
      </div>
    </div>
  )
}

Boxed Style

days
hours
min
sec
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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 
1
2
3
<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

hours
min
sec
xs
hours
min
sec
sm
hours
min
sec
md
hours
min
sec
lg
hours
min
sec
xl
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<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

days
hours
min
sec
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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

Flash Sale Ends In

Don't Miss Out!

days
hours
min
sec
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>