JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<h1></h1>

<div id='num1'>1</div>
<div id='num2'>2</div>
<div id='num3'>3</div>
<div id='num4'>4</div>
<div id='num5'>5</div>
<div id='num6'>6</div>
<div id='num7'>7</div>
<div id='num8'>8</div>
<div id='num9'>9</div>
<div id='num10'>10</div>
<div id='num11'>11</div>
<div id='num12'>12</div>

<!--
    60 = 12 
    15 = 3
    30 = 6
    45 = 9    

-->

CSS

body{
    font-family: 'Raleway'
}
div{
    width: 20px;
    height: 20px;
    background: yellow;
    position: absolute;
}
#num12{
    margin: 0px 0 0 200px;
}
#num1{
    margin: 20px 0 0 250px;
}
#num11{
    margin: 20px 0 0 150px;
}

#num2{
    margin: 55px 0 0 280px;
}
#num10{
    margin: 55px 0 0 120px;
}

#num3{
    margin: 85px 0 0 300px;
}
#num9{
    margin: 85px 0 0 100px;
}

#num4{
    margin: 120px 0 0 280px;
}
#num8{
    margin: 120px 0 0 120px;
}

#num5{
    margin: 150px 0 0 250px;
}
#num7{
    margin: 150px 0 0 150px;
}

#num6{
    margin: 180px 0 0 200px;
}

JavaScript

var rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { return setTimeout(callback, 1000 / 60);};



var div = document.getElementsByTagName('div');
var div1 = document.getElementById('num1');
var h1 = document.getElementsByTagName('h1')[0];

    function num(iter,ticknum){
        div[iter].innerHTML = ticknum; 
    }


function clockWork(){
    var time = new Date();
     var d = time.getSeconds();
         var mil = parseInt(time.getMilliseconds() / (1000 / 12),10),
             mil = mil === 0 ? 12: mil;
    var numArr = [];
    h1.innerHTML = d;
   var dynamicNum = parseInt(d / 5,10);
   var dynamicNum2 = parseInt(d * 5,10);  
    
    h1.innerHTML = mil;
     dynamicNum = dynamicNum === 0 ? 12: dynamicNum;

    function recursive(a){
       var b = mil + a;
        if (b === mil + 1){
            div[b].innerHTML = b;
        }
        recursive(1);
    }
    
 /*   
    for(var i = 0; i < div.length; i++){
        if(i === dynamicNum){
         num(i,dynamicNum );
            
        }
    }
   */ 
    
    
rAF(clockWork);      
}

rAF(clockWork);