JSFiddle - React, Tailwind, and code Playground

HTML

<div id='boxExample'>
  <input type="radio" name='box' id="box0" class='zero box' checked />
  <input type="radio" name='box' id="box1" class='one box' />
  <input type="radio" name='box' id="box2" class='two box' />
  
  <div class="boxLabels">
    <label for="box1" class='one'>ONE</label>
    <label for='box0' class='zero'></label>
    <label for="box2" class='two'>TWO</label>
  </div>
  <div class='boxContents'>
    <div class='boxContent one'>Content of first tab</div>
    <div class='boxContent two'>Content of second tab</div>
    <label for='box0' class='boxClose'></label>
  </div>
</div>

CSS

/* Checkbox Hack: checkboxes are hidden */
.box {
  display: none
}

/* When input is selected, its corresponding label is hidden,
and the empty labels is given text "Hide ${label}" */
.box.zero:checked~.boxLabels>.zero,
.box.one:checked ~.boxLabels>.one,
.box.two:checked ~.boxLabels>.two {
  display: none
}

.boxLabels>.zero::after { content: 'HIDE ONE' }
.box.two:checked ~ 
  .boxLabels>.zero::after { content: 'HIDE TWO' }

/* By default, content is hidden */
.boxContent { opacity: 0; }

/* The corresponding content is shown */
.box.one:checked ~ .boxContents .one,
.box.two:checked ~ .boxContents .two {
  opacity: 100; 
}


/* General styles, not relevant to hack */
#boxExample{ display:grid; grid-template-rows: 100px auto; }

.boxContent {  transition: all .5s ease; }

.boxContents {
  display: grid;
  align-items: center;
  text-align:center;
  background: white;
  position: relative;
  border-right: solid thin green;
  box-shadow: 8px 0px 15px -6px black;
  z-index: 2;
  padding: 10px;
}
.boxLabels { 
  display: grid; grid-auto-flow: column; 
  text-align: center; 
}
.boxLabels > label { cursor: pointer }

.boxClose {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer
}

.boxClose::after {
  content: 'x'
}