JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="wrap">
    <h1>Draft <strong>Countdown</strong></h1>
    <div class="countdown" data-time="22:30:00"></div>
</div>
<div class="wrap">
	<h1>Second <strong>Countdown</strong></h1>
    <div class="countdown" data-settings='{"time": "01:22:50", "titleHours": "Sati", "titleMinutes": "Minuti", "titleSeconds": "Sekunde"}'></div>
</div>

CSS

body {
    background-color: #f2f1ed;
}

.wrap {
    margin: 0 auto;
    height: 310px;
}

a {
    text-decoration: none;
    color: #1a1a1a;
}

h1 {
    margin-bottom: 60px;
    text-align: center;
    font: 300 2.25em "Lato";
    text-transform: uppercase;
}

h1 strong {
    font-weight: 400;
    color: #ea4c4c;
}

h2 {
    margin-bottom: 80px;
    text-align: center;
    font: 300 0.7em "Lato";
    text-transform: uppercase;
}

h2 strong {
    font-weight: 400;
}

.countdown {
    width: 720px;
    margin: 0 auto;
}

.countdown .bloc-time {
    float: left;
    margin-right: 45px;
    text-align: center;
}

.countdown .bloc-time:last-child {
    margin-right: 0;
}

.countdown .count-title {
    display: block;
    margin-bottom: 15px;
    font: normal 0.94em "Lato";
    color: #1a1a1a;
    text-transform: uppercase;
}

.countdown .figure {
    position: relative;
    float: left;
    height: 110px;
    width: 100px;
    margin-right: 10px;
    background-color: #fff;
    border-radius: 8px;
    -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
    -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
}

.countdown .figure:last-child {
    margin-right: 0;
}

.countdown .figure>span {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    font: normal 5.94em/107px "Lato";
    font-weight: 700;
    color: #de4848;
}

.countdown .figure .top:after,
.countdown .figure .bottom-back:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.countdown .figure .top {
    z-index: 3;
    background-color: #f7f7f7;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    -moz-border-radius-topleft: 10px;
   ...

JavaScript

// Create Countdown Plugin
$.fn.fancyCountdown = function() {
 
    return this.each(function() {
        
		var that=this;
		var $el=$(this);
		
		that.values = {
			titleHours: 'Hours',
			titleMinutes: 'Minutes',
			titleSeconds: 'Seconds'
		};
		
		if( $el.data('settings') ) {
			that.values = $el.data('settings');
		} else {
			that.values = $.extend( {}, that.values, $el.data() );
		};
		var explodeTime = that.values.time.split(':');
		that.values.hours = explodeTime[0]*1;
		that.values.minutes = explodeTime[1]*1;
		that.values.seconds = explodeTime[2]*1;
		that.values.hours1 = explodeTime[0][0];
		that.values.hours2 = explodeTime[0][1];
		that.values.minutes1 = explodeTime[1][0];
		that.values.minutes2 = explodeTime[1][1];
		that.values.seconds1 = explodeTime[2][0];
		that.values.seconds2 = explodeTime[2][1];
		that.values.totalSeconds = that.values.hours*60*60 + that.values.minutes*60 + that.values.seconds;
		that.values.template = '\
			<span class="top">#</span>\
			<span class="top-back">\
				<span>#</span>\
			</span>\
			<span class="bottom">#</span>\
			<span class="bottom-back">\
				<span>#</span>\
			</span>\
		';
		that.countdownInterval = null;
		
		if( !$el.hasClass('countdown-engaged') ) {
		
			$el.addClass('countdown-engaged');

			// Initialize the countdown  
			that.init=function() {

				// DOM
				that.createDom();
				that.$ = {
					hours: $el.find('.bloc-time.hours .figure'),
					minutes: $el.find('.bloc-time.min .figure'),
					seconds: $el.find('.bloc-time.sec .figure')
				};

				// Animate countdown to the end 
				that.count();
			};
			
			that.createDom = function() {
				var html = '\
					<div class="bloc-time hours">\
						<span class="count-title">' + that.values.titleHours + '</span>\
						<div class="figure hours hours-1">\
							' + that.values.template.replace(/#/g, that.values.hours1) + '\
						</div>\
						<div class="figure hours hours-2">\
							' + that.values.template.replace(/#/g, that.values.hours2) +...