JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
  <div class="child">
    <span class="zzz">SDA</span>
  </div>
  <div class="child">
    <span class="zzz">SDA</span>
  </div>
  <div class="child">
    <span class="zzz">SDA</span>
  </div>  
</div>

CSS

.child:not(:first-child){
  opacity: 0.3;
}

.child:first-child:hover~.child {
  opacity: 1;
}