JSFiddle - React, Tailwind, and code Playground

by Erik Kotsiuba

HTML

<span id="c0"></span>
<span id="c1"></span><br><br>

<span id="c2"></span>
<span id="c3"></span><br><br>

<span id="c4"></span>
<span id="c5"></span><br><br>

<span id="c6"></span>
<span id="c7"></span><br><br>

<span id="c8"></span>
<span id="c9"></span><br><br>

<span id="c10"></span>
<span id="c11"></span>
<span id="c12"></span>

CSS

span {padding-left:50px; width: 50px; height: 50px;}

JavaScript

$(function() {
traffic_lights = [
						
						[{color:'green' ,time:9 },
						{color:'yellow' ,time:6 },
						{color:'red' ,time:19 },],

						[{color:'green' ,time:9 },
						{color:'yellow' ,time:6 },
						{color:'red' ,time:19 },],
						
						[{color:'green',time:30},
						{color:'yellow',time:6},
						{color:'red',time:17},],		
							
						[{color:'green',time:30},
						{color:'yellow',time:6},
						{color:'red',time:17},],		
						
						[{color:'red',time:29},
						{color:'yellow',time:6},
						{color:'red',time:27},],	
							
						[{color:'red',time:29},
						{color:'yellow',time:6},
						{color:'red',time:27},],
                         
						[{color:'green',time:32},
						{color:'yellow',time:6},
						{color:'red',time:40},],
						
						[{color:'green',time:32},
						{color:'yellow',time:6},
						{color:'red',time:40},],
                         
						[{color:'green',time:37},
						{color:'yellow',time:6},
						{color:'red',time:33},],	
						
						[{color:'green',time:37},
						{color:'yellow',time:6},
						{color:'red',time:33},],	
						
                         
						[{color:'red',time:23},
						{color:'yellow',time:3},
						{color:'green',time:80},
						{color:'yellow',time:6},],
						
						[{color:'gray',time:26},
						{color:'green',time:46},
						{color:'gray',time:40},],
						
						[{color:'red',time:56},
						{color:'yellow',time:3},
						{color:'green',time:21},
						{color:'yellow',time:6},],
			]


    for (var a = 0, f; a < traffic_lights.length; a++) {
        var g = traffic_lights[a];
        f = $("#c" + a);
        (function (a, d) {
            var b = 0,
                time = 0;
            return function s() {
                time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
                a.html(time);
                time--;
                window.setTimeout(s, 1e3);
            }
        })(f, g)();
    }

})