JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div style="width:100px; height:100px; border:0px">
    <div id="cvet1" style="background-color: rgb(0, 0, 0);"></div>
    <div id="cvet2" style="background-color: rgb(0, 256, 0);"></div>
    <div id="cvet3" style="background-color: rgb(0, 0, 256);"></div>
    <div id="cvet4" style="background-color: rgb(256, 0, 0);"></div>
</div>

CSS

div {
    border: 0px solid black;
    width:50px;
    height:50px;
    float:left;
    margin: auto;
    text-align: center;
}

#log {position:absolute;left:0;right:0;text-align:center;}

JavaScript

colorBox("cvet1",1,0);
colorBox("cvet2",2,0x00ff);
colorBox("cvet3",3,0x0000ff);
colorBox("cvet4",4,0xff);

function colorBox(element,minutes,color) {
    element=document.getElementById(element);
    var interval=10,step=Math.round(0xffffff/(minutes*60*1E3)*interval);
    setInterval(function(){
        color=(color+=step)>0xffffff?(color-=0xffffff):color;
        clr=color.toString(16); 
        element.style.backgroundColor='#'+"000000".substr(clr.length)+clr;
    },interval);
}