JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div>

</div>
<div>

</div>
<div>

</div>
<div>

</div>

<div>

</div>
<div>

</div>

CSS

div {
  display: inline-block;
  width:40px;
  height: 40px;
  background: red;
  margin: 0px;
  box-shadow: -1px -1px black, -3px -3px black, -5px -5px black;
}
div:hover {
  box-shadow: 0px -5px black;
}
div:hover + div,
div:hover + div + div,
div:hover + div + div + div,
div:hover + div + div + div + div,
div:hover + div + div + div + div + div {
  box-shadow: 1px -1px black,3px -3px black,5px -5px black;
}