JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timer" id="a">
	
	<div class="display">
		<div class="symbol">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="symbol">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="del">:</div>
		<div class="symbol">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="symbol">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="del">:</div>
		<div class="symbol">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
		<div class="symbol">
			<div class="pre"></div>
			<div class="cur"></div>
		</div>
	</div>

</div>

<span id="first"></span>

CSS

html, body{margin: 0px;background-color: #20262e;}

.timer {
    width: 210px;
    margin: 10px auto 0px auto;
    font-family: Comic Sans MS;
    font-size: 20px;
    color:  #fff;
    cursor:  default;
    text-align:  center;
    line-height: 40px;
    border-radius: 10px;
    cursor:  default;
}

.display {
    width: 174px;
    height: 50px;
    margin: 0px auto 0px auto;
    color: #ffffff;
    padding: 10px 0px 10px 0px;
}

.symbol {
    width: 25px;
    height: 50px;
    float:  left;
    overflow:  hidden;
    margin: 0px 0px 0px 0px;
}

.pre,.cur{
    width: 92%;
    height: 40px;
    float: left;
    background-color: #3F51B5;
    border-radius: 3px;
    box-shadow: inset 1px 1px 3px 0px rgba(255, 255, 255, 0.5);
}

.pre {
    margin: -45px 0px 5px 0px;
}
.cur {
    margin: 5px 0px 0px 0px;
}

.del {
    width: 9px;
    float:  left;
    line-height: 47px;
    margin-left: 0px;
    text-indent: 0px;
}

JavaScript

var symbols = [...document.querySelectorAll('.symbol .cur')]
function show(h, m, s) {
  var timeString =
      h.toString().padStart(2, '0')	+
      m.toString().padStart(2, '0') +
      s.toString().padStart(2, '0');

  symbols.forEach((symbol, i) => symbol.textContent = timeString[i])
}

function countdown(dateStr, display) {
  let targetDate = new Date(dateStr).getTime(),
      timer = setInterval(function() {
        let now = new Date().getTime(),
            diff = targetDate - now;

        let hours = Math.floor((diff % 86400000) / 3600000),
            minutes = Math.floor((diff % 3600000) / 60000),
            seconds = Math.floor((diff % 60000) / 1000);

        show(hours, minutes, seconds);

        if (diff < 0) {
          clearInterval(timer);
        }
      }, 1000);
}


var display = document.getElementById('first')
countdown('2033-02-10 00:00:00', display)