JSFiddle - React, Tailwind, and code Playground

by shivkumarganesh

HTML

<script src="http://fonts.googleapis.com/css?family=Press+Start+2P"></script>
<div class="container">
    <div class="doc" id="hours">
        <div class="digit">0</div>
        <div class="digit">5</div>
    </div>
    <div class="doc" id="mins">
        <div class="digit">2</div>
        <div class="digit">4</div>
    </div>
    <div class="doc" id="sec">
        <div class="digit">1</div>
        <div class="digit">0</div>
    </div>
</div> 
<div class="glassOverLay">&nbsp;</div>

CSS

.container{
     background: -moz-linear-gradient(90deg, #303030, #101010, #303030) repeat scroll 0 0 transparent;
    border: 1px solid #767676;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #A3A3A3 inset, 1px 1px 0 #4E4D4D, 2px 2px 0 #A3A3A3;
    height: 100px;
    max-width: 600px;
    padding: 10px;
    width: 100%;   
}
.doc{
    background-image: -moz-linear-gradient(90deg, #505050, #303030);
    box-shadow: 0 0 1px #F3F3F3 inset;
    float: left;
    height: 80px;
    max-width: 180px;
    padding: 10px;
    width: 100%;
}
.doc:first-child{
   border-radius: 5px 0 0 5px;    
}
.doc:last-child{
    border-radius: 0 5px 5px 0;
}
.digit{
     background: -moz-linear-gradient(90deg, #D7D7D7, #B5B3B3, #D7D7D7) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    color: #343131;
    float: left;
    font-family: monospace;
    font-size: 50pt;
    font-weight: bold;
    height: 63px;
    max-width: 68px;
    padding: 5px 10px 10px;
    text-align: center;
    text-shadow: 1px 1px 0 #E3E3E3;
    width: 100%;   
    -moz-transform-style:preserve-3d;
    -moz-transform-origin:center;
    -moz-transform:rotateX(0deg);
}
.digit:first-child{
    border-radius: 4px 0 0 4px;
    border-right: 1px solid #FFFFFF;
    box-shadow: -1px 0 2px #232323; 
}
.digit:last-child{
    box-shadow: 1px 0 2px #232323;
    border-radius: 0 4px 4px 0;
}
.glassOverLay{
 position:absolute;
 left:0px;
 top:0px;
 z-index:100;
 background:-moz-linear-gradient(center top , rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)) repeat scroll 0 0%, -moz-linear-gradient(left top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)) repeat scroll 0 0 transparent;
  height: 122px;
  max-width: 622px;    
  width: 100%;   
}
#hours .digit{
        -moz-transition:-moz-transform 500ms ease-in 0ms;
}
#mins .digit{
        -moz-transition:-moz-transform 300ms ease-in 0ms;
}
#sec .digit{
...

JavaScript

var pHours=[0,5],pMins=[2,4],pSecs=[1,0];
$(function() {
  setInterval(setNewTime, 1000);
});

function setNewTime()
{
   var timeNow=getDate(5.5);
   var hours=timeNow.getHours().toString().split("");
   var mins=timeNow.getMinutes().toString().split("");
   var secs=timeNow.getSeconds().toString().split("");
   checkSeconds(secs);
   checkMinutes(mins);
   checkHours(hours);    
}
function checkForChange(id,newValue,oldValue)
{
    if(newValue!=oldValue)
    {
        updateClock(id,newValue);
        return 1;
    }
    return 0;            
}
function updateClock(id,newValue)
{
    $(id).addClass('halfRotation').text(newValue).delay(500)
        .removeClass('halfRotation')
}
function getDate(offset){
  var now = new Date();
  var hour = 60*60*1000;
  var min = 60*1000;
  return new Date(now.getTime() + (now.getTimezoneOffset() * min) + (offset * hour));
}
function checkSeconds(secs)
{
 
   if(secs.length==1)
   {
     updateClock('#sec .digit:last-child',secs[0],pSecs[0]);   
     checkForChange('#sec .digit:first-child',0,pSecs[1]);
     pSecs[0]=secs[0];
     pSecs[1]=0;
   }else
   {
     updateClock('#sec .digit:first-child',secs[0],pSecs[0]);   
     checkForChange('#sec .digit:last-child',secs[1],pSecs[1]);
     pSecs[0]=secs[0];
     pSecs[1]=secs[1];
   }   
}
function checkMinutes(mins)
{
 
   if(mins.length==1)
   {
     checkForChange('#mins .digit:last-child',mins[0],pMins[0]);   
     checkForChange('#mins .digit:first-child',0,pMins[1]);
     pMins[0]=mins[0];
     pMins[1]=0;
   }else
   {
     checkForChange('#mins .digit:first-child',mins[0],pMins[0]);   
     checkForChange('#mins .digit:last-child',mins[1],pMins[1]);
     pMins[0]=mins[0];
     pMins[1]=mins[1];
   }   
}
function checkHours(hours)
{
 
   if(hours.length==1)
   {
     checkForChange('#hours .digit:last-child',hours[0],pHours[0]);  
     checkForChange('#hours .digit:first-child',0,pHours[1]);
     pHours[0]=hours[0];
     pHours[1]=0;
   }else
   {
    ...