JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first"> </div>

<div class="wrapper">
<p> Lorem ipsum </p>
<p> Lorem ipsum </p>
<p> Lorem ipsum </p>
<div class="second"> </div>
<div class="third"> </div>
</div>

CSS

div {
    display:inline-block;
}
.first {
    width:50px;
    height:50px;
    background:#000;
}
.second {
    width:50px;
    height:50px;
    background:yellow;    
}
.third {
    width:50px;
    height:50px;
    background:red;    
}
.first:hover ~ .wrapper  {
    opacity:0.2;
}