JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divContainer"></div>

CSS

#divContainer {
  height:300px;
  background-color:greenyellow;
}
#h1Countdown {
    line-height: 300px;
    text-align: center;
    width:100%;
    color:greenyellow;
    margin: 0;
    font-size: 64px;
    position: absolute;
    transition: all .5s;
}

#h1Countdown.show {
    color: rgb(255,255,255);
}

JavaScript

var jqDivContainer = $('#divContainer');

function countdown(time){
    jqDivContainer.prepend('<h1 id="h1Countdown"></h1>').css('position', 'relative');
    var jqH1Countdown = $('#h1Countdown');
    jqH1Countdown.text(time).toggleClass('show');
    function repeat(time) {
        setTimeout(function(){
            var isShowing = jqH1Countdown.hasClass('show');
            if(!isShowing) time--;
            if(time > 0){
                if(!isShowing) jqH1Countdown.text(time);
                jqH1Countdown.toggleClass('show');
                repeat(time);
            }else {
                jqH1Countdown.remove();
                jqDivDrawingJumbo.css('position', 'static');
            }
        },500);
    }

    repeat(time);

}

countdown(10);