JSFiddle - React, Tailwind, and code Playground

by Denis Plotnikov

HTML

<div id="trafficLightContainer">
<div class="trafficLight trafficLightLeft" data-tlid="0"></div>
<div class="trafficLight" data-tlid="1"></div>
<div class="trafficLight trafficLightRight" data-tlid="2"></div>
</div>

CSS

html{ background-color: #222222; padding:0px; margin:0px; }
#trafficLightContainer {
   font-size:0px;
   width:100%;
    text-align:center;
    position:fixed;
    top:0px;
    left:0px;
}
.trafficLightLeft {
    transform:rotate(-15deg);
}
.trafficLightRight {
    transform:rotate(15deg);
}

 
/* --------------------------------------- */

.race-light-blue-active, .race-light-blue-inactive, .race-light-green-active, .race-light-green-inactive, .race-light-red-active, 
.race-shift-down, .race-shift-up, .race-pedal-gas, .tl-green, .tl-idle, 
.tl-red, .tl-yellow
{ display:inline-block; max-width: 100%; background-size: 100%; background-image: url('https://st1.craziegames.com/racing7.vk/interface/racingInterfaceSprite.png'); }
 
.race-light-blue-active { background-position: 0 0%; background-size: 100%; }
.race-light-blue-inactive { background-position: 0 9.512342%; background-size: 100%; }
.race-light-green-active { background-position: 0 19.024684%; background-size: 100%; }
.race-light-green-inactive { background-position: 0 28.537026%; background-size: 100%; }
.race-light-red-active { background-position: 0 38.049368%; background-size: 100%; }
.race-shift-down { background-position: 0 49.037865%; background-size: 103.947368%; }
.race-shift-up { background-position: 0 61.9491%; background-size: 103.947368%; }
.race-pedal-gas { background-position: 0 74.906832%; background-size: 141.071429%; }
.tl-green { background-position: 0 82.363213%; background-size: 156.435644%; }
.tl-idle { background-position: 0 88.242142%; background-size: 156.435644%; }
.tl-red { background-position: 0 94.121071%; background-size: 156.435644%; }
.tl-yellow { background-position: 0 100%; background-size: 156.435644%; }

JavaScript

var windov = { innerHeight : 620 };

function resizeTrafficLight( ) {	// Ресайз светофора
  $('.trafficLight').css('width', windov.innerHeight* ( 95 / 620 ) );
  $('.trafficLight').css('height', windov.innerHeight* ( 95 / 620 ) );
  $('#trafficLightContainer').css('top', windov.innerHeight* ( 20 / 620 ));
    $('.trafficLight').css('margin-left', windov.innerHeight* ( -4 / 620 ) );
    $('.trafficLight').css('margin-right', windov.innerHeight* ( -4 / 620 ) );
}

function setTrafficLights(l0,l1,l2) {
    var lightsCodes = [ 'tl-idle', 'tl-yellow', 'tl-green', 'tl-red' ];
    // LIGHT 0
   $('.trafficLight[data-tlid="0"]').removeClass('tl-idle');
   $('.trafficLight[data-tlid="0"]').removeClass('tl-green');
   $('.trafficLight[data-tlid="0"]').removeClass('tl-yellow');
   $('.trafficLight[data-tlid="0"]').removeClass('tl-red');
    // LIGHT 1
   $('.trafficLight[data-tlid="1"]').removeClass('tl-idle');
   $('.trafficLight[data-tlid="1"]').removeClass('tl-green');
   $('.trafficLight[data-tlid="1"]').removeClass('tl-yellow');
   $('.trafficLight[data-tlid="1"]').removeClass('tl-red');
    // LIGHT 2
   $('.trafficLight[data-tlid="2"]').removeClass('tl-idle');
   $('.trafficLight[data-tlid="2"]').removeClass('tl-green');
   $('.trafficLight[data-tlid="2"]').removeClass('tl-yellow');
   $('.trafficLight[data-tlid="2"]').removeClass('tl-red');
    
   // Set New Lights
    $('.trafficLight[data-tlid="0"]').addClass( lightsCodes[l0] );
    $('.trafficLight[data-tlid="1"]').addClass( lightsCodes[l1] );
    $('.trafficLight[data-tlid="2"]').addClass( lightsCodes[l2] );
}

resizeTrafficLight( );

// Эмулятор

function testL( ) {

setTrafficLights(0,0,0);
setTimeout( function( ) {
 setTrafficLights(1,0,0);
 setTimeout( function( ) {
 setTrafficLights(1,1,0);
  setTimeout( function( ) {
 setTrafficLights(1,1,1);
    setTimeout( function( ) {
 		setTrafficLights(2,2,2);
    	 setTimeout( function( ) {
 		setTrafficLights(3,3,3);
    	//setTimeout( testL, 1000...