JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div>Z</div>
<div>Z</div>
<div>Z</div>
<div>Z</div>

SCSS

body {
  position: relative;
}
div {
  position: absolute;
  top: 50px;
  left: 50px;
  font-family: sans-serif;
  font-size: 30px;
  transition: transform 500ms linear;
  &:not(:first-of-type) {
    pointer-events: none;
  }
  &:hover, &:hover~div {
    transform: scale(1, 3);
    &:nth-of-type(2) {
      transform: rotate(-45deg) scale(1, 3);
    }
    &:nth-of-type(3) {
      transform: rotate(-90deg) scale(1, 3);
    }
    &:nth-of-type(4) {
      transform: rotate(-135deg) scale(1, 3);
    }
  }
}