JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="m">
        <div class="str"></div>
        <div class="str"></div>
        <div class="str"></div>
        <div class="str"></div>
        <div class="str"></div>
 
    </div>

CSS

.str{
    display: inline-block;
    background: gray;
      width: 111px;
    height: 100px;
}
 
.str:nth-child(1):hover ~ .str:nth-child(1),
.str:nth-child(2):hover ~ .str:nth-child(-n+2),
.str:nth-child(3):hover ~ .str:nth-child(-n+3),
.str:nth-child(4):hover ~ .str:nth-child(-n+4),
.str:nth-child(5):hover ~ .str:nth-child(-n+5){
 
    background: red;
    width: 111px;
    height: 101px;
}