JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <a href="#">link1</a>
  <a href="#">link2</a>
  <a href="#">link3</a>
  <a href="#">link4</a>
  <a href="#">link5</a>
</div>
<div class="bigbox">
  <h2>Some Text</h2>
  <h2>Anothe text</h2>
  <h2>Anothe text</h2>
</div>

<div class="bigbox-down">
  <h2>Some Text</h2>
  <h2>Anothe text</h2>
  <h2>Anothe text</h2>
</div>

CSS

.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

.bigbox-down h2:hover ~ h2,
.bigbox h2:hover ~ h2 {
  background-color: #00f;
}

.bigbox-down {
  transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
}