Countdown time with Tailwind CSS and JavaScript

A countdown timer is a great way to create urgency for an upcoming event, product launch, or special occasion. In this post, we will walk through a simple countdown timer using HTML, TailwindCSS for styling, and JavaScript for the countdown logic.

HTML Structure

Our HTML consists of a simple layout with four boxes to display days, hours, minutes, and seconds remaining until the target date. Here’s the breakdown of the structure:

<div class="flex gap-4 justify-center items-center">
  <div class="flex flex-col bg-amber-200 p-4">
    <p>Days</p>
    <h2 class="text-5xl" id="days">0</h2>
  </div>
  <div class="flex flex-col bg-amber-200 p-4">
    <p>Hours</p>
    <h2 class="text-5xl" id="hours">0</h2>
  </div>
  <div class="flex flex-col bg-amber-200 p-4">
    <p>Min.</p>
    <h2 class="text-5xl" id="minutes">0</h2>
  </div>
  <div class="flex flex-col bg-amber-200 p-4">
    <p>Sec.</p>
    <h2 class="text-5xl" id="seconds">0</h2>
  </div>
</div>

Change set time

On the line var countDownDate = new Date(“Mar 28, 2025 15:37:25”).getTime();
change Mar 28, 2025 to what even you need. That time will be end of the coundown.

// Set the date we're counting down to
var countDownDate = new Date("Mar 28, 2025 15:37:25").getTime();

// Function to update the timer display immediately
function updateTimer() {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;
}

// Call the updateTimer function immediately after page load
updateTimer();

// Update the count down every 1 second
var x = setInterval(function() {
  updateTimer();

  var now = new Date().getTime();
  var distance = countDownDate - now;

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("days").innerHTML = "EXPIRED";
    document.getElementById("hours").innerHTML = "";
    document.getElementById("minutes").innerHTML = "";
    document.getElementById("seconds").innerHTML = "";
  }
}, 1000);

Entire html example with tailwind from CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-violet-700 p-24">

    <div class="flex gap-4 justify-center items-center">
        <div class="flex flex-col bg-amber-200 p-4">
          <p>Days</p>
          <h2 class="text-5xl" id="days">0</h2>
        </div>
        <div class="flex flex-col bg-amber-200 p-4">
          <p>Hours</p>
          <h2 class="text-5xl" id="hours">0</h2>
        </div>
        <div class="flex flex-col bg-amber-200 p-4">
          <p>Min.</p>
          <h2 class="text-5xl" id="minutes">0</h2>
        </div>
        <div class="flex flex-col bg-amber-200 p-4">
          <p>Sec.</p>
          <h2 class="text-5xl" id="seconds">0</h2>
        </div>
    </div>

    <script>
    // Set the date we're counting down to
    var countDownDate = new Date("Mar 28, 2025 15:37:25").getTime();
    
    // Function to update the timer display immediately
    function updateTimer() {
      var now = new Date().getTime();
      var distance = countDownDate - now;

      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      document.getElementById("days").innerHTML = days;
      document.getElementById("hours").innerHTML = hours;
      document.getElementById("minutes").innerHTML = minutes;
      document.getElementById("seconds").innerHTML = seconds;
    }

    // Call the updateTimer function immediately after page load
    updateTimer();

    // Update the count down every 1 second
    var x = setInterval(function() {
      updateTimer();

      var now = new Date().getTime();
      var distance = countDownDate - now;

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("days").innerHTML = "EXPIRED";
        document.getElementById("hours").innerHTML = "";
        document.getElementById("minutes").innerHTML = "";
        document.getElementById("seconds").innerHTML = "";
      }
    }, 1000);
    </script>    
</body>
</html>

Days

0

Hours

0

Min.

0

Sec.

0

To render working example we are using custom block "DBlocks CodePro"

DBlocks CodePro
Click to Copy