JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timer" data-time="2017/12/31">
<div class="bg"></div>
  <div class="time">
    <div id="days">03</div>
  </div>
  
  <div class="time">
    <div id="hours">14</div>
  </div>
  
  <div class="time">
    <div id="minutes">48</div>
  </div>
  
  <div class="time">
    <div id="seconds">06</div>
  </div>
  
</div>

SCSS

.timer{
  position: relative;
  display: flex;
  width: 300px;
  border: 1px solid #0007f3;
  & .time{
    position: relative;
    margin: 0 15px;
  }
  & .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    background-color: #0007f3;
  }
}

Babel + JSX

(function () {

    const $timers = $(".timer");
    //console.log("$timers:", $timers);

    let date = `${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()}`;

    $timers.each(function () {
        let deadline = $(this).attr("data-time");
        //console.log(deadline);
        let daysBlock = $(this).find("#days");
        let hoursBlock = $(this).find("#hours");
        let minutesBlock = $(this).find("#minutes");
        let secondBlock = $(this).find("#seconds");
        initializeClock(deadline, daysBlock, hoursBlock, minutesBlock, secondBlock);

    });

    function getTimeRemaining(endtime) {
        let t = Date.parse(endtime) - Date.parse(new Date());
        let seconds = Math.floor((t / 1000) % 60);
        let minutes = Math.floor((t / 1000 / 60) % 60);
        let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        let days = Math.floor(t / (1000 * 60 * 60 * 24));
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    function initializeClock(endtime, daysBlock, hoursBlock, minutesBlock, secondBlock) {
        /* let daysBlock = document.querySelector("#days");
        let hoursBlock = document.querySelector("#hours");
        let minutesBlock = document.querySelector("#minutes");
        let secondBlock = document.querySelector("#seconds"); */


        function updateClock() {
            let t = getTimeRemaining(endtime);
            daysBlock.text(('0' + t.days).slice(-2));
            hoursBlock.text(('0' + t.hours).slice(-2));
            minutesBlock.text(('0' + t.minutes).slice(-2));
            secondBlock.text(('0' + t.seconds).slice(-2));
            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }


        updateClock();
        let timeinterval = setInterval(updateClock, 1000);

    }


    /* initializeClock(deadline); */


})();