JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timer">
	
	<div class="time">
		<div class="CurPre">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="spaceCurPreT"></div>
		<div class="CurPre">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="del">:</div>
		<div class="CurPre">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="spaceCurPreT"></div>
		<div class="CurPre">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="del">:</div>
		<div class="CurPre">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="spaceCurPreT"></div>
		<div class="CurPre">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
	</div>

</div>

CSS

html, body{margin: 0px;background-color: #20262e;}

.timer{
    width: 210px;
    margin: 10px auto 0px auto;
    font-family: Comic Sans MS;
    font-size: 20px;
    color:  #fff;
    cursor:  default;
    text-align:  center;
    line-height: 40px;
    border-radius: 10px;
    cursor:  default;
}

.time{
    width: 174px;
    height: 50px;
    margin: 0px auto 0px auto;
    color: #ffffff;
    padding: 10px 0px 10px 0px;
}

.CurPre{
    width: 25px;
    height: 50px;
    float:  left;
    overflow:  hidden;
    margin: 0px 0px 0px 0px;
}

.pre,.cur{
    width: 92%;
    height: 40px;
    float: left;
    background-color: #3F51B5;
    border-radius: 3px;
    box-shadow: inset 1px 1px 3px 0px rgba(255, 255, 255, 0.5);
}

.pre{
    margin: -45px 0px 5px 0px;
}
.cur{
    margin: 5px 0px 0px 0px;
}

.del{
    width: 9px;
    float:  left;
    line-height: 47px;
    margin-left: 0px;
    text-indent: 0px;
}

.spaceCurPreT{
    width: 2px;
    height: 5px;
    float: left;
}

JavaScript

var interv;
interv = setInterval(timeZ,1000); var intervTimeZ=true;

var YourDate = 'feb 10,2033 00:00:00';

var alignT=false;
var spAnim = 450;
var top = 5;
var han = Number($('.cur').height() + top);

var can = 1; var count; var anim = []; var y = 0;

function timeZ(){
	commonTime = Date.parse(YourDate)/1000;
	time = commonTime - Math.floor(new Date().getTime()/1000);
	year = String(Math.floor(time / 31536000));								rest = time - (31536000 * year);
	month = String(Math.floor(rest / 2678400));								rest = rest - (2678400 * month);
	day = String(Math.floor(rest / 86400));									rest = rest - (86400 * day);

	hour = String(Math.floor(rest / 3600));			rest = rest - (3600 * hour);
	min = String(Math.floor(rest / 60));
	sec = String(rest - (60 * min));
	if(hour<=9){hour='0'+hour;} if(min<=9){min='0'+min;} if(sec<=9){sec='0'+sec;}
	hour = hour.split(""),		min = min.split(""),		sec = sec.split("");
	
	$('.time > .CurPre > .cur').each(function (i,el) {
	    if(i==0){ $(this).html(hour[0]); }		if(i==1){ $(this).html(hour[1]); }
	    if(i==2){ $(this).html(min[0]); }		if(i==3){ $(this).html(min[1]); }
	    if(i==4){ $(this).html(sec[0]); }
	});

	if(!alignT){
		$('.time > .CurPre > .cur').each(function (i,el) {
    		if(i==5){ $(this).html(sec[1]); }
		    alignT=true;
		});
	}

	if(sec[1]==9){
		can++;
	}

	count = ($('.cur').length-1)-can;
	anim = [hour[0],hour[1],min[0],min[1],sec[0],sec[1]];

	whichAnim();
}

function whichAnim(){
	y++;
	if(y==1){ animTimer1(); }
	if(y==2){ animTimer2(); y=0;}
}
function animTimer1(){
	$('.cur').each(function (i,el){
		if(i > count){
			$('.pre:eq('+i+')').text(anim[i]);
		    $('.pre:eq('+i+')').animate({ marginTop : top+'px' }, spAnim, function() {
			    $('.cur:eq('+i+')').animate({ marginTop : (-han*2)-top+'px' }, 0);
			});
			if(can>1){can=1;}
		}
	});
}

function animTimer2(){
	$('.cur').each(function (i,el){
		if(i > count){
			$('.cur:eq('+i+')').text(anim[i]);
			$('.pre:eq('+i+')').animate({ marginTop :...