JSFiddle - React, Tailwind, and code Playground

HTML

<div class="back">
    <div id="circleRed">

    </div>
    <div id="circleOrange">

    </div>
    <div id="circleGreens">

    </div>
  </div>

CSS

#circleRed, #circleGreens, #circleOrange {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  margin-bottom: 10px;
  background-color: "black";
}



.back{
  width: 60px;
  margin: 10px 0px 10px 20px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: black;
}

body{
  margin: 0;
}

JavaScript

var red = document.getElementById("circleRed");
var orange = document.getElementById('circleOrange')
var green = document.getElementById('circleGreens');

loop();
setInterval(loop,11000);

function loop(){
	console.log("loop started")
  setTimeout( function(){
    red.style.backgroundColor = "red";
    orange.style.backgroundColor = "black";
    green.style.backgroundColor = "black";
    console.log("red opened")
  }, 2000);

   setTimeout(function(){
    green.style.backgroundColor = "green";
    red.style.backgroundColor = "black";
    console.log("green opened")
  }, 5000);

  setTimeout(function(){
    orange.style.backgroundColor = "orange";
    green.style.backgroundColor = "black";
    red.style.backgroundColor = "black";
    console.log("orange opened")    
  }, 10000);
}