JSFiddle - React, Tailwind, and code Playground

HTML

<div id="countdown">
        <div class="cd-title">Time Remaining to Complete Entry</div>

        <div class="cd-days cd-elem">
            <div>
                <div>1</div><div>0</div>
            </div>
            <p>Days</p>
        </div>

        <div class="cd-hours cd-elem">
            <div>
                <div>1</div><div>0</div>
            </div>
            <p>Hours</p>
        </div>

        <div class="cd-minutes cd-elem">
            <div>
                <div>3</div><div>0</div>
            </div>
            <p>Minutes</p>
        </div>

        <div class="cd-seconds cd-elem">
            <div>
                <div>0</div><div>0</div>
            </div>
            <p>Seconds</p>
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="test"></div>

SCSS

body{
    background-color:rgb(169, 169, 169);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.clearfix{
    clear:both;
}
#countdown{
    display:block;
    width:30%;
    height: auto;
    position:relative;
    border:1px solid #ccc;
    margin:20px 0 20px 50px;
    font-weight: bolder;

    .cd-title{
        padding:10px;
        font-size:14px;
    }
    .cd-elem{
        display:block;
        float:left;
        margin-left:10px;
        width:20%;
        text-align: center;

        div{
            margin:0;
            border:1px solid #000;
            padding:0;
            white-space: nowrap;
            border-radius:5px;

            div{
                display:inline-block;
                width:50%;
                text-align: center;
                border:none;
                padding:5px 0px 5px 0px;
                margin:0;
                background-color:rgba(255,255,255,1);
                border-radius:0;
            }
            &:first-child{
                border-right:1px solid #000;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
            &:last-child{
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        }
        p{
            font-size:10px;
        }
    }
}

JavaScript

$(document).ready(function(){
	var setDate = new Date("29 Oct 2014, 14:00:00");
	var msPerDay = 24 * 60 * 60 * 1000 ;


	window.setInterval(function(){
		var today = new Date();
		var timeLeft = (setDate.getTime() - today.getTime());
		
		var e_daysLeft = timeLeft / msPerDay;
		var daysLeft = Math.floor(e_daysLeft);
		
		var e_hrsLeft = (e_daysLeft - daysLeft)*24;
		var hrsLeft = Math.floor(e_hrsLeft);
		
		var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
		var minsLeft = Math.floor(e_minsLeft);
		
		var e_secsLeft = (e_minsLeft - minsLeft)*60;
		var secsLeft = Math.floor(e_secsLeft);
		
		//var sec1 = secsLeft.substr(1);
		//console.log(sec1);
       if(daysLeft < 10)
           daysLeft = '0' + daysLeft;
       if(hrsLeft < 10)
           hrsLeft = '0' + hrsLeft;
       if(minsLeft < 10)
           minsLeft = '0' + minsLeft;
       if(secsLeft < 10)
           secsLeft = '0' + secsLeft;
        
        
		var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft;

		$('#countdown .cd-seconds div').html('<div>' + ((secsLeft + '').split('').join('</div><div>'))+'</div>');
		$('#countdown .cd-minutes div').html('<div>' + ((minsLeft + '').split('').join('</div><div>'))+'</div>');
		$('#countdown .cd-hours div').html('<div>' + ((hrsLeft + '').split('').join('</div><div>'))+'</div>');
		$('#countdown .cd-days div').html('<div>' + ((daysLeft + '').split('').join('</div><div>'))+'</div>');
		$('.test').html(timeString);
	}, 1000);
});