JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clock" class="clock">
  <div id="hour" class="flipboard">00</div>
  <div id="minute" class="flipboard">00</div>
  <div id="second" class="flipboard">00</div>
  <div id="millisecond" class="flipboard">00</div>
</div>

CSS

body { 
  background-color: #DDDDDD;
  font-family: 'Helvetica Neue', Helvetica, Arial;
  font-size: 20px;
}

.clock {
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
  opacity: 0;
}

.show {
  opacity: 1;
}

.flipboard {
  -webkit-border-radius: 10px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#CCC));
  text-align: center;
  line-height: 90px;
  font-size: 60px;
  font-weight: bold;
  float: left;
  width: 90px;
  height: 90px;
  -webkit-box-shadow: 0px 5px 10px #333;
  margin-right: 5px;
  border: 1px solid #FFF;
  border-bottom-color: #DDD;
  border-right-color: #DDD;
  text-shadow: 1px 2px 1px #FFF;
  color: #333;
}

JavaScript

function $(id) {
  return document.getElementById(id);
}

function updateTime() {
  var date = new Date();
  $('hour').innerHTML = pad(date.getHours());
  $('minute').innerHTML = pad(date.getMinutes());
  $('second').innerHTML = pad(date.getSeconds());
  $('millisecond').innerHTML = pad(date.getMilliseconds());
}

function pad(number) {
  return ('0' + number).substr(-2);
}

(function() {
  updateTime();
  
  $('clock').className = 'clock show';
})();