JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer_box">
			<div id ="red" class="light active"></div>
			<div id ="yellow" class="light"></div>
			<div id ="green" class="light"></div>
</div>

CSS

#outer_box{
		  width: 70px;
		  height:150px;
		  background:black;
		  cursor: pointer;/*add hand cursor */
		}

		#red{
		  width: 50px;
		  height:50px;
		  margin: auto;
		  border-radius: 50%;
		  background: red;
		}

		#yellow{
		  width: 50px;
		  height:50px;
		  margin: auto;
		  border-radius: 50%;
		  background: yellow;
		}

		#green{
		  width: 50px;
		  height:50px;
		  margin: auto;
		  border-radius: 50%;
		  background: green;
		}
		.light { visibility: hidden;}/*default set visibility to hidden*/
		.light.active { visibility: visible;}/*add active class dynamically to visible*/

JavaScript

var	colors = ["red", "yellow", "green"];
var state = 1;//because red already visible
//addEventListener method add onclick hadnler
document.getElementById('outer_box').addEventListener('click', function(){
  if (state==3){//if state reaches to 3, reset to 0
    state = 0;
  }
  var allLights = document.querySelectorAll('.light');
  for(var i = 0; i < allLights.length; i++) {//remove active class from all light
    allLights[i].className = "light";
  }
  document.getElementById(colors[state]).className = "light active"; //add active class on the next light;
  state++;
}, false);