JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id="face"></div>

CSS

#face {margin:50px;border:10px solid #000; position:relative; width:116px; height:133px; background-color:#000;}

JavaScript

function positions(i){
    var t = 0,
        l = 0,
        o = 8,
        x = 7;
    switch (true) {
        case i >= 0 && i < 8://right
            t=0; l=((i+x)*o);
            break;
        case i >= 8 && i < 23://down
            t=((i-7)*o); l=(2*x)*o;
            break;
        case i >= 23 && i < 37://left 
            t=(16*o); l=(2*x); l=((l-(i-23))*o);
            break;
        case i >= 37 && i < 53://up
            t=(16*o)-((i-37)*o); l=0;
            break;
        case i >= 53://right
            t=0;l=(i-53)*o;
            break;
        default:
            t=100+(i*o);l=100+(i*o);
    }
    return {top:t,left:l};
};
function second(i){
    var e=document.createElement('div');
    e.style.position="absolute";
    e.style.borderWidth="1px";
    e.style.borderStyle="solid";
    e.style.borderColor=(i%5==0)?"white":"#333";
    //e.style.color=(i%15==0)?"red":(i%5==0)?"blue":"black";
    //e.style.backgroundColor=(i%15==0)?"red":(i%5==0)?"blue":"black";
    e.style.color="black";
    e.style.backgroundColor="black";
    e.style.width=(i%15==0 && i%30!=0)?"10px":(i%5==0 && i%10==0 && i%15!=0)?"5px":"3px";
    e.style.height=(i%15==0 && i%30==0)?"10px":(i%5==0 && i%10!=0 && i%15!=0)?"5px":"3px";
    var p = positions(i);
    //e.style.top=p.top+"px";
    e.style.top=p.top-((i%15==0 && i%30==0 && i%60!=0)?7:(i%5==0 && i%10!=0 && i%15!=0 && i>15 && i<45)?2:0)+"px";
    //e.style.left=p.left+"px";
    e.style.left=p.left-((i==15)?7:(i==10 || i==20)?2:0)+"px";
    return e;
}


//var face = document.body;
//SET UP
var face = document.getElementById("face");
var i = 0;
while(i<60){    
    face.appendChild(second(i));
    i++;
}
//RAF
//callback using window.requestAnimationFrame if available else setTimeout at 60fps:
var rAF = window.requestAnimationFrame || function(callback){window.setTimeout(callback,1000/60);};

//UPDATE
var was_s = 0;   
(function update() {
    var d = new Date(),
        m = d.getMinutes();
        s = d.getSeconds();
    if...