JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

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;
    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 spAnim = 450, top = 5, han = $('.cur').height();

var YourDate = 'mar 21,2018 23:59:59';

function timeZ(){
  	date= new Date(new Date().setHours(new Date().getHours()+3)), 
  	ddate=new Date(new Date(YourDate)- date).toTimeString().replace(/:/g,'');

    $('.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);
			});
		}
    });
}