JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="hide">
  <a href="#" class="redOn" tabindex="1">тык red</a><br>
<a href="#" class="redOff" tabindex="2">тык blue</a><br>
<a href="#" class="greenOn" tabindex="3">тык green</a>
<div class="one">
    <div class='red'>red</div>
    <div class='blue'>blue</div>
    <div class="green">green<br><br></div></div>
   </div>
</div>

CSS

.wrapper{
  width: 60%;
  background: #fff;
  padding: 30px;
  border: 1px solid #000;
}
.hide{
  width: 50%;
  margin: 0 auto;
  position: relative;
}
.hide .red{
  width: 100%;
  background: #ff0000;
  position: absolute;
  z-index:9;
}
.hide .blue{
  width: 100%;
  background: #0000ff;
  position: absolute;
  z-index: 10;
}

.hide .green{
  width: 100%;
  background: #00ff00;
  position: absolute;
  z-index: 8;
}

.redOn:focus ~ .one .red,
.redOn:active ~ .one .red,
.redOn:hover{
  z-index:11;
} 

.greenOn:focus ~ .one .green,
.greenOn:active ~ .one .green,
.greenOn:hover{
  z-index:11;
}