JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="something"><div class="element">Panel 1</div></div>
    <div class="something"><div class="element">Panel 2</div></div>
    <div class="something"><div class="element">Panel 3</div></div>
    <div class="something"><div class="element">Panel 4</div></div>
    <div class="something"><div class="element">Panel 5</div></div>
    <div class="something"><div class="element">Panel 6</div></div>
    <div class="something"><div class="element">Panel 7</div></div>
    <div class="something"><div class="element">Panel 8</div></div>
</div>

CSS

.something {
  display: inline-block;
  margin: 20px;
  width: 100px;
  height: 100px;
}

.element {
  width: 100%;
  height: 100%;
  display: inline-block;
  background: #DDDDDD;
  text-align: center;
  opacity: 1;
}
.container:hover .something {
  opacity: 0.4;
}
.container:hover .something:hover{
  opacity: 1;
}