JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<script>
onload = function ()
{
var CLR = ['100', '110', '001', '000', '001', '000', '001', '000', '010'],
    TMR = [   12,     5,    12,     2,     2,     2,     2,     2,    3]; 
AAA ();
   function AAA () 
   {
   var dv = document.getElementById ('TL').getElementsByTagName ('div');
   var cc = CLR.shift (); CLR.push (cc);
   var tt = TMR.shift (); TMR.push (tt);
   dv[0].style.backgroundColor = (cc.charAt (0) == 1) ? 'red' : '';
   dv[1].style.backgroundColor = (cc.charAt (1) == 1) ? 'yellow' : '';
   dv[2].style.backgroundColor = (cc.charAt (2) == 1) ? 'green' : '';
   setTimeout (AAA, tt * 200);
   }
}
  </script>

<div id="TL">
   <div></div>
   <div></div>
   <div></div>
</div>

CSS

#TL {background-color: gray; width: 74px; padding: 2px}
#TL div {background-color: black; width: 70px; height: 70px; border-radius: 70px; margin: 2px}