JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenedor">

<div id="btn_rojo" class="rojo">ROJO</div>
<div id="btn_amarillo" class="amarillo">AMARILLO</div>
<div id="btn_verde" class="verde">VERDE</div>

<hr/>

<div id="luz_roja" class="luces"></div>
<div id="luz_amarilla" class="luces"></div>
<div id="luz_verde" class="luces"></div>
</div>

CSS

#contenedor{
    background:#FC6;
    border:5px solid #F93;
    border-radius:10px;
    box-shadow: 0px 2px 2px #666;    
    margin:50px auto;
    text-align:center;
    width:550px;
    }
#btn_rojo, #btn_amarillo, #btn_verde {
    background:#D5D5D5;
    border:1px solid #999;
    border-radius:10px;
    box-shadow: 1px 1px 2px #333;
    cursor:pointer;
    display:inline-block;
    font-size:20px;
    height:30px;
    line-height:30px;
    margin:10px;
    text-align:center;
    width:150px;;
}

#btn_rojo{color:red;}
#btn_amarillo{color:yellow;}
#btn_verde{color: green;}

#btn_rojo:hover, #btn_amarillo:hover, #btn_verde:hover{
    box-shadow: 1px 1px 2px #333 inset;
    text-shadow:1px 1px 2px #333;}
    
.luces{
    background:#000;
    box-shadow: 0px 2px 2px #666;
    border-radius:150px;
    display:inline-block;    
    height:150px;
    margin: 10px;
    position:relative;
    text-align:center;
    vertical-align:middle;
    width:150px;
    z-index:5;
    -webkit-transition: 2s linear;
}

.luces:before{
    border-radius:150px;
    box-shadow: 0px -15px 2px #F60;
    content:"";
    height:150px;
    font-size:3em;
    line-height:150px;
    position:absolute; top:5px; left:0px;
    vertical-align:middle;
    width:150px;
    z-index:10;
    -webkit-transition: 3s linear;
}
    

#btn_rojo:hover ~ div[class="luces"],
#btn_amarillo:hover ~ div[class="luces"],
#btn_verde:hover ~ div[class="luces"] {
    color:#FFF;
    box-shadow:1px 10px 10px #000 inset;
}

#btn_rojo:hover ~ div[class="luces"]{background:red; }
#btn_rojo:hover ~ div[class="luces"]:before{content:"PARE";}

#btn_amarillo:hover ~ div[class="luces"]{background: yellow;}
#btn_amarillo:hover ~ div[class="luces"]:before{content:"OJO";}

#btn_verde:hover ~ div[class="luces"]{background: green;}
#btn_verde:hover ~ div[class="luces"]:before{content:"PASE";}