JSFiddle - React, Tailwind, and code Playground

by Satrio Elang

HTML

<input id="start" name="controls" type="radio" />
        <input id="stop" name="controls" type="radio" />
        <input id="reset" name="controls" type="radio" />
        <div class="timer">
            <div class="cell">
                <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell">
                <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell divider"><div class="numbers">:</div></div>
            <div class="cell">
                <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
            </div>
            <div class="cell">
                <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell divider"><div class="numbers">:</div></div>
            <div class="cell">
                <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
            </div>
            <div class="cell">
                <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell divider"><div class="numbers">:</div></div>
            <div class="cell">
                <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell">
                <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell">
                <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
        </div>
        <!-- Lables for the controls -->
        <div id="timer_controls">
            <label for="start">Start</label>
            <label for="stop">Stop</label>
            <label for="reset">Reset</label>
        </div>

CSS

.timer{padding:10px;overflow:hidden;display:inline-block;border:7px solid #efefef;border-radius:5px;position:relative;background:linear-gradient(top,#222,#444);background:-webkit-linear-gradient(top,#222,#444);background:-moz-linear-gradient(top,#222,#444);background:-o-linear-gradient(top,#222,#444);box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-webkit-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-moz-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-o-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1)}
.cell{/*Should only display 1 digit. Hence height = line height of .numbers and width = width of .numbers*/
width:0.60em;height:40px;font-size:50px;overflow:hidden;position:relative;float:left}
.numbers{width:0.6em;line-height:40px;font-family:digital,arial,verdana;text-align:center;color:#fff;position:absolute;top:0;left:0;/*Glow to the text*/
text-shadow:0 0 5px rgba(255,255,255,1)}
/*Styles for the controls*/
#timer_controls{margin-top:-5px}
#timer_controls label{cursor:pointer;padding:5px 10px;background:#efefef;font-family:arial,verdana,tahoma;font-size:11px;border-radius:0 0 3px 3px}
input[name="controls"]{display:none}
/*Control code*/
#stop:checked~.timer .numbers{animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused}
#start:checked~.timer .numbers{animation-play-state:running;-webkit-animation-play-state:running;-moz-animation-play-state:running;-o-animation-play-state:running}
#reset:checked~.timer .numbers{animation:none;-webkit-animation:none;-moz-animation:none;-o-animation:none}
.moveten{/*The digits move but dont look good. We will use steps now 10 digits = 10 steps. You can now see the digits swapping instead of moving pixel-by-pixel*/
animation:moveten 1s steps(10,end) infinite;-webkit-animation:moveten 1s steps(10,end)...