JSFiddle - React, Tailwind, and code Playground

by sii_side

HTML

<a href="#">default</a>
<a href="#" id="r1">color 1</a>
<a href="#" id="r2">color 2</a>
<a href="#" id="r3">color 3</a>

<div class="wrapper">
  <p>text text text</p>
  <p>text text text</p>
  <p>text text text</p>
</div>

CSS

.wrapper {
  height: 700px;
  background-color: #f00;
  color: #fff;
}

#r1:focus ~ .wrapper {
  background-color: #ccf;
  color: #000;
}

#r2:focus ~ .wrapper {
  background-color: #0f0;
  color: #00f;
}

#r3:focus ~ .wrapper {
  background-color: #ff0;
  color: #aaa;
}