JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="hide">
    <label for="red">тык red</label><br>
    <label for="blue">тык blue</label><br>
    <label for="green">тык green</label>
    <div class="one">
      <input type="radio" name="one" id="red">
      <div class='red'>red</div>
      <input type="radio" name="one" id="blue">
      <div class='blue'>blue<br><br></div>
      <input type="radio" name="one" id="green">
      <div class="green">green<br><br><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 label{
  cursor:pointer;
}

.hide .red{
  width: 100%;
  background: #ff0000;
  display:none;
}
.hide .blue{
  width: 100%;
  background: #0000ff;
  display:none;
}

.hide .green{
  width: 100%;
  background: #00ff00;
  display:none;
}

.hide input{
  border:0;
  margin:0;
  padding:0;
  width:0;
  height:0;
}

.hide input:checked + div{
  display:block;
}