JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="view">

<div id="flip">

<div id="h" class="box">
<div class="panel now">
<div class="num top">23</div>
<div class="btm"><span class="num">23</span></div>
</div>
<div class="panel next">
<div class="num top" data-transform="matrix(1, 0, 0, 0.01, 1, 0)" style="-webkit-transform: matrix(1, 0, 0, 0.01, 1, 0); ">22</div>
<div class="btm" data-transform="matrix(1, 0, 0, 0.01)" style="-webkit-transform: matrix(1, 0, 0, 1, 1, 0); "><span class="num">23</span></div>
</div>
</div>

<div class="colon">:</div>

<div id="m" class="box">
<div class="panel now">
<div class="num top">04</div>
<div class="btm"><span class="num">04</span></div>
</div>
<div class="panel next">
<div class="num top" data-transform="matrix(1, 0, 0, 0.01, 1, 0)" style="-webkit-transform: matrix(1, 0, 0, 0.01, 1, 0); ">31</div>
<div class="btm" data-transform="matrix(1, 0, 0, 0.01)" style="-webkit-transform: matrix(1, 0, 0, 1, 1, 0); "><span class="num">04</span></div>
</div>
</div>

<div class="colon">:</div>

<div id="s" class="box">
<div class="panel now">
<div class="num top">39</div>
<div class="btm"><span class="num">39</span></div>
</div>
<div class="panel next">
<div class="num top" data-transform="matrix(1, 0, 0, 0.01, 1, 0)" style="-webkit-transform: matrix(1, 0, 0, 0.01, 1, 0); ">38</div>
<div class="btm" data-transform="matrix(1, 0, 0, 0.01)" style="-webkit-transform: matrix(1, 0, 0, 1, 1, 0); "><span class="num">39</span></div>
</div>
</div>

</div>

</div>
<script src="https://github.com/heygrady/transform/raw/master/dist/jquery.transform-0.9.3.min.js"></script>

CSS

#flip {margin: 10px 0 0 27px;}
.box {
  position: relative;
  float: left;
  width: 120px;
  height: 120px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #000;
  -webkit-box-shadow: 0 1px 3px 0 #999, 0 4px 0 0 #f0f0f0, 0 5px 0 0 #fff;
  -moz-box-shadow: 0 1px 3px 0 #999, 0 4px 0 0 #f0f0f0, 0 5px 0 0 #fff;
  box-shadow: 0 1px 3px 0 #999, 0 4px 0 0 #f0f0f0, 0 5px 0 0 #fff;
  color: #FFF;
  font-weight: bold;
}

.colon {
  float: left;
  width: 26px;
  height: 120px;
  line-height: 100px;
  text-align: center;
  font-size: 80px;
  font-family: Georgia;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.panel {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 100px;
  height: 100px;
}
.panel:before,
.panel:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 50px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 1);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 1);
}
.panel:before {
  bottom: -6px;
  background: #222;
}
.panel:after {
  bottom: -3px;
  background: #333;
}

.top,
.btm {
  position: absolute;
  width: 100px;
  height: 50px;
  background: #333;
  line-height: 100px;
  text-align: center;
  font-size: 80px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 1;
}

.top {
  top: 0;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.btm {
  top: 50px;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 1);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 1);
 ...

JavaScript

var hh, mm, ss, ohh, omm, oss;

var hNowTop = $('#h .now .top');
var mNowTop = $('#m .now .top');
var sNowTop = $('#s .now .top');
var hNowBtmTxt = $('#h .now .btm span');
var mNowBtmTxt = $('#m .now .btm span');
var sNowBtmTxt = $('#s .now .btm span');
var hNextTop = $('#h .next .top');
var mNextTop = $('#m .next .top');
var sNextTop = $('#s .next .top');
var hNextBtm = $('#h .next .btm');
var mNextBtm = $('#m .next .btm');
var sNextBtm = $('#s .next .btm');
var hNextBtmTxt = $('#h .next .btm span');
var mNextBtmTxt = $('#m .next .btm span');
var sNextBtmTxt = $('#s .next .btm span');

function setTime(){
  var now = new Date();
  hh = ('0' + now.getHours()).slice(-2);
  mm = ('0' + now.getMinutes()).slice(-2);
  ss = ('0' + now.getSeconds()).slice(-2);
}

function set(){
  setTime();
  if(hh !== ohh){
    hNextTop.text(ohh);
    hNextTop.transform({
      matrix: [1, 0, 0, 1]
    });
    hNowTop.text(hh);
    hNextTop.animate({
      matrix: [1, 0, 0, 0.01]
    }, 100, 'linear', function(){
      hNextBtmTxt.text(hh);
      hNextBtm.animate({
        matrix: [1, 0, 0, 1]
      }, 100, 'linear', function(){
        hNowBtmTxt.text(hh);
        hNextBtm.transform({
          matrix: [1, 0, 0, 0.01]
        });
      });
    });
    ohh = hh;
  }
  if(mm !== omm){
    mNextTop.text(omm);
    mNextTop.transform({
      matrix: [1, 0, 0, 1]
    });
    mNowTop.text(mm);
    mNextTop.animate({
      matrix: [1, 0, 0, 0.01]
    }, 100, 'linear', function(){
      mNextBtmTxt.text(mm);
      mNextBtm.animate({
        matrix: [1, 0, 0, 1]
      }, 100, 'linear', function(){
        mNowBtmTxt.text(mm);
        mNextBtm.transform({
          matrix: [1, 0, 0, 0.01]
        });
      });
    });
    omm = mm;
  }
  if(ss !== oss){
    sNextTop.text(oss);
    sNextTop.transform({
      matrix: [1, 0, 0, 1]
    });
    sNowTop.text(ss);
    sNextTop.animate({
      matrix: [1, 0, 0, 0.01]
    }, 100, 'linear', function(){
      sNextBtmTxt.text(ss);
     ...