<div id="countdown">
    <div>
        <span id="days">00</span>
        <p>Days</p>
    </div>
    <div>
        <span id="hours">00</span>
        <p>Hours</p>
    </div>
    <div>
        <span id="minutes">00</span>
        <p>Minutes</p>
    </div>
    <div>
        <span id="seconds">00</span>
        <p>Seconds</p>
    </div>
</div>

#countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

#countdown div {
    text-align: center;
    margin: 0 10px;
}

#countdown span {
    font-size: 48px;
    font-weight: bold;
    display: block;
}

#countdown p {
    margin: 0;
    font-size: 16px;
}

// Set the date and time for the countdown (YYYY-MM-DDTHH:MM:SS)
var countDownDate = new Date("2028-12-31T23:59:59").getTime();

// Update the countdown every 1 second
var x = setInterval(function() {

    // Get the current date and time
    var now = new Date().getTime();

    // Find the time difference between now and the countdown date
    var distance = countDownDate - now;

    // Calculate days, hours, minutes, and seconds
    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);

    // Display the results
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;

    // If the countdown is over, display a message
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "EXPIRED";
    }
}, 1000);