JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="cube" id="cube0">make me white!</div>
    <br/>
    <div class="cube" id="monitorCube">hover over me</div>
    <br/>
    <div class="cube" id="cube1">make me red!</div>
    <br/>
    <div class="cube" id="cube2">make me green!</div>
    <br/>
    <div class="cube" id="cube3">make me blue!</div>
</div>
<p>See how the earlier sibling gets no love.</p>

CSS

.container, .cube {
    outline:1px solid red;
}
.container {
    width:200px;
}
.cube {
    width:100px;
    height:25px;
    background-color:gray;
}
#monitorCube:hover {
    background-color:black;
}
#monitorCube:hover ~ #cube0{background-color:#fff;}
#monitorCube:hover ~ #cube1{background-color:#f00;}
#monitorCube:hover ~ #cube2{background-color:#0f0;}
#monitorCube:hover ~ #cube3{background-color:#00f;}