JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timer-holder"></div>

CSS

.count-unit 
         {
             margin: 0 11px 0 11px;
             /*padding: 0 20px 0 20px;*/
             float: left;
         }
         
         .count-digit { 
            background-image     : url("Images/numbers.png"); 
            background-color     : transparent; 
            background-repeat    : no-repeat; 
            float:left;
         } 
         
.digit0
{
    height: 44px;
    width: 30px;
    background-position: -0px -0px;
    background-color: Red;
}
        
.digit1
{
    height: 44px;
    width: 30px;
    background-position: -30px -0px;
    background-color: Green;
}
        
.digit2
{
    height: 44px;
    width: 30px;
    background-position: -60px -0px;
    background-color: blue;
    background-color: Purple;    
}
        
.digit3
{
    height: 44px;
    width: 30px;
    background-position: -90px -0px;
    background-color: Grey;
}
        
.digit4
{
    height: 44px;
    width: 30px;
    background-position: -120px -0px;
    background-color: Green;
}
        
.digit5
{
    height: 44px;
    width: 30px;
    background-position: -150px -0px;
    background-color: Orange;
}
        
.digit6
{
    height: 44px;
    width: 30px;
    background-position: -180px -0px;
    background-color: Yellow;
}
        
.digit7
{
    height: 44px;
    width: 30px;
    background-position: -210px -0px;
    background-color: Cyan;
}
        
.digit8
{
    height: 44px;
    width: 30px;
    background-position: -240px -0px;
    background-color: Purple;
}
        
.digit9
{
    height: 44px;
    width: 30px;
    background-position: -270px -0px;
}

JavaScript

"use strict";

function CountDown(TargetDate, TargetID, DisplayFormat, FinishMessage, CountActive) {
    if (!(this instanceof CountDown)) {
        return new CountDown();
    }
    this.TargetID = TargetID || "cntdwn";
    this.CountStepper = -1;
    this.CountActive = CountActive || true;
    this.FinishMessage = FinishMessage || "It is finally here!";
    this.TargetDate = TargetDate || "12/31/2020 5:00 AM";
    this.DisplayFormat = DisplayFormat || "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    this.LeadingZero = true;

    this.timeSegments = ["days", "hours", "minutes", "seconds"];
    this.timeDigits = ["tens", "ones"];

    var target = document.getElementById(this.TargetID);

    //Generate HTML for img digits
    for (var seg in this.timeSegments) {
        var segElm = document.createElement("div");
        //segElm.id = "count-" + seg;
        segElm.setAttribute("class", "count-unit");
        target.appendChild(segElm);

        for (var dig in this.timeDigits) {
            var digElm = document.createElement("div");
            digElm.setAttribute("class","count-digit digit0");
            segElm.appendChild(digElm);
            this[seg + "_" + dig] = digElm;
        }
    }
}

CountDown.prototype = {
    constructor: CountDown,

    start: function () {
        var SetTimeOutPeriod = (Math.abs(this.CountStepper) - 1) * 1000 + 990;

        var dthen = new Date(this.TargetDate);
        var dnow = new Date();
        var ddiff = 0;
        if (this.CountStepper > 0) {
            ddiff = dnow - dthen;
        } else {
            ddiff = dthen - dnow;
        }
        this.gsecs = Math.floor(ddiff / 1000);

        var me = this;
        this.Terminate = setInterval(function () { me.countBack(); }, SetTimeOutPeriod);
    },

    stop: function () {
        setInterval(this.Terminate, 0);
    },

    countBack: function () {
        this.gsecs += this.CountStepper;
        var secs = this.gsecs;
        if (secs <= 0) {
          ...