JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="parent">

<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

SCSS

.parent {
  float: left;
}

.child {
  width: 20px;
  height: 20px;
  float: right;
  background: green;
  margin-left: 1px;
  transition: background .2s 0s;
  &:hover {
    background: red;
    & + .child { background: red; }
    & + .child + .child { background: red; }
    & + .child + .child + .child { background: red; }
    & + .child + .child + .child + .child { background: red; }
  }

}