JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stageChangeCountdown">The next set of maps will be chosen in <span>04:00:00</span></div>

JavaScript

$(document).ready(function() {
    var stageCountdownSpan = document.getElementById("stageChangeCountdown").getElementsByTagName("span")[0];

    function updateStageCountdown() {
        var currentDate = new Date((new Date()).toUTCString());
        var targetDate = calculateStageCountdownDate(currentDate);
        var difference = Math.abs(targetDate - currentDate);

        var hours = Math.floor(difference / 3600000);
        var minutes = Math.floor(difference / 60000) - hours * 60;
        var seconds = Math.floor(difference / 1000) - minutes * 60;

        var hoursString = "0" + hours;
        var minutesString = ("00" + minutes).substr(-2, 2);
        var secondsString = ("00" + seconds).substr(-2, 2);

        stageCountdownSpan.innerHTML = hoursString + ":" + minutesString + ":" + secondsString;
    }

    function calculateStageCountdownDate(currentDate) {
        var targetDate = new Date(currentDate.getTime());
        var targetHour = Math.floor(targetDate.getHours() / 4) * 4 + 2;
        targetDate.setUTCHours(targetHour, 0, 0, 0);
        return targetDate;
    }

    updateStageCountdown();
    setInterval(updateStageCountdown, 1000);
});