JSFiddle - React, Tailwind, and code Playground
HTML
<div id="divContainer"></div>
CSS
#divContainer {
height:300px;
background-color:greenyellow;
}
JavaScript
var jqDivContainer = $('#divContainer');
function countdown(time){
jqDivContainer.prepend('<h1 id="h1Countdown"></h1>').css('position', 'relative');
var jqH1Countdown = $('#h1Countdown');
jqH1Countdown.css({
color:'white',
'line-height': '300px',
width: '100%',
'text-align': 'center',
'margin-top': 0,
'font-size': 64,
position: 'absolute',
});
function repeat(time){
jqH1Countdown.text(time);
jqH1Countdown.fadeIn(500,'swing',function(){
jqH1Countdown.fadeOut(500,'swing',function(){
time--;
if (time > 0) repeat(time);
else {
jqH1Countdown.remove();
jqDivContainer.css('position', 'static');
}
});
});
}
repeat(time);
}
countdown(10);