JSFiddle - React, Tailwind, and code Playground

HTML

<span id="count">
    <span class="first_digit">2</span>
 <span class="second_digit">:</span>
 <span class="third_digit">0</span>
 <span class="fourth_digit">0</span>
</span>
<button class="rightbtn" type="button" id="startClock">Start</button>

CSS

.first_digit {
    width:60px;
    font-size:40px;
    padding:4px;
    color: #CCC;
    text-shadow: 0px 1px 2px #000;
    text-align: center;
    background-color: #333;
    border-radius: 6px;
}
.second_digit {
    color: #333;
    font-size:40px;
}
.third_digit {
    width:60px;
    font-size:40px;
    padding:4px;
    color: #CCC;
    text-shadow: 0px 1px 2px #000;
    text-align: center;
    background-color: #333;
    border-radius: 6px;
}
.fourth_digit {
    width:60px;
    font-size:40px;
    padding:4px;
    color: #CCC;
    text-shadow: 0px 1px 2px #000;
    text-align: center;
    background-color: #333;
    border-radius: 6px;
}

JavaScript

$('#startClock').click(function () {
    var counter = 120;
    setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            var str = parseInt(counter / 60) + ':' + (counter % 60);
            $(".first_digit").html(str.split(':')[0]);

            $(".third_digit").html(str.split(':')[1].toString()[0]);
            $(".fourth_digit").html(str.split(':')[1].toString()[1]);
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);

});