<div id=timer></div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif, serif;
  background-color: #202020;
  max-height: 80vh;
}

#timer {
  display: flex;
  padding: 20px;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

span {
  height: 200px;
  width: 200px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(232, 12, 12, 0.7);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
// Date I am counting down to
let countDownDate = new Date("Feb 5, 2025").getTime();

// Ensuring every second is running
let x = setInterval(function () {
  // Current time
  let now = new Date().getTime();

  // Time between now and end time
  let distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="timer"

  document.getElementById("timer").innerHTML =
    days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

  document.querySelector("#timer").innerHTML = `
  <span>Days ${days}</span>
  <span>Hours ${hours}</span>
  <span>Minutes ${minutes}</span>
  <span>Seconds ${seconds}</span>
  `;
  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.