JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="main">
        <div class="round_green"></div>
        <div class="round_yellow"></div>
        <div class="round_red"></div>
    </div>
</div>

CSS

#wrap{
	position:relative;
}
#main {
	border:2px black solid;
	width:110px;
	height:320px;
}
.round_green{
	width:100px;
	height:100px;
	background:#6C6;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;
}
.round_yellow{
	margin-top:100px;
	width:100px;
	height:100px;
	background:#F90;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;
}
.round_red{
	margin-top:200px;
	width:100px;
	height:100px;
	background:#F00;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;
}

JavaScript

$(document).ready(function(){
	$('.round_green').show().delay(3500).hide(0);
	$('.round_yellow').hide().delay(3500).show(1).delay(1500).hide(0);
	$('.round_red').hide().delay(5000).show(1);
});