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;
    overflow:hidden;
}

.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 = setInterval(timeZ,1000); 

var YourDate = 'mar 22,2018 16:10:00';

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

function todigit(datediff){
	var x=Math.round(datediff/1000) ,// got a seconds
  sec=x%60,
  min=Math.floor(x/60)%60,
  hours=Math.floor(x/(60*60));
  return (hours>99?'XX':(hours<10?'0':'')+hours)+
  (min<10?'0':'')+min+
  (sec<10?'0':'')+sec;
}

function timeZ(){
	var commonTime = Date.parse(YourDate), 
  	date= new Date(), 
  	ddate=todigit(commonTime- date);
    $('.CurPre').each(function (i,el){
      var cur=$('.cur',el),pre=$('.pre',el),char=ddate.charAt(i);
      if(pre.text()!=char){
        pre.text(char);
        $(this).stop(false,false).animate({ paddingTop : han+(top*2)+'px' }, spAnim, function() {
          cur.text(char);
          $(this).css('paddingTop',0);
        });
      }
    });
}