JSFiddle - React, Tailwind, and code Playground

by bmwertman

HTML

<div id="countup" class="countupHolder"></div>

CSS

.countupHolder{
    margin:0 auto;
	font: 18px/1.5 'Open Sans Condensed',sans-serif;
	text-align:center;
	letter-spacing:-3px;
}

.position{
	display: inline-block;
	height: 1.6em;
	overflow: hidden;
	position: relative;
	width: 1.05em;
}

.digit{
	position:absolute;
	display:block;
	width:1em;
	background-color:#444;
	border-radius:0.2em;
	text-align:center;
	color:#fff;
	letter-spacing:-1px;
}

.digit.static{
	box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);

	background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.5, #3A3A3A),
		color-stop(0.5, #444444)
	);
}

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDays{  display:none !important;}
.countDiv0{ display:none !important; }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}
.countDiv3{}

 
.countDiv{
	display:inline-block;
	width:15px;
	position:relative;
    text-align:left;
    
} 

#countup label{
    letter-spacing:1px;
    margin-left: 2px;  
}

JavaScript

(function($){

    // Number of seconds in every time division

    var days    = 24*60*60,
        hours   = 60*60,
        minutes = 60;
// Creating the plugin
$.fn.countup = function(prop){

	var options = $.extend({
		callback	: function(){},
		start		: new Date()	// Changing this to "start"
	},prop);

	// Tename the "left" variable to "passed"
	var passed = 0, d, h, m, s,
		positions;

	init(this, options);

	positions = this.find('.position');

	(function tick(){

		// Calculate the passed time
		passed = Math.floor((new Date() - options.start) / 1000);

		// Calculate the passed minutes, hours and days		

		d = Math.floor(passed / days);
		updateDuo(0, 1, d);
		passed -= d*days;

		h = Math.floor(passed / hours);
		updateDuo(2, 3, h);
		passed -= h*hours;

		m = Math.floor(passed / minutes);
		updateDuo(4, 5, m);
		passed -= m*minutes;

		// Number of seconds passed
		s = passed;
		updateDuo(6, 7, s);

		// Calling an optional user supplied callback
		options.callback(d, h, m, s);

		// Scheduling another call of this function in 1s
		setTimeout(tick, 1000);
	})();

	// This function updates two digit positions at once
	function updateDuo(minor,major,value){
		switchDigit(positions.eq(minor),Math.floor(value/10)%10);
		switchDigit(positions.eq(major),value%10);
	}

	return this;
};
   
//init and switchdigit helper functions
function init(elem, options){
    elem.addClass('countupHolder');

    // Creating the markup inside the container

    $.each(['Days','Hours','Minutes','Seconds'],function(i){
        $('<span class="count'+this+'">').html(
            '<span class="position">\
                <span class="digit static">0</span>\
            </span>\
            <span class="position">\
                <span class="digit static">0</span>\
            </span>'
        ).appendTo(elem);
        if(this!="Seconds"){
            elem.append('<span class="countDiv countDiv'+i+'"></span>');
            } 
    });
          ...