JSFiddle - React, Tailwind, and code Playground

HTML

<label for="item1">1</label>
<label for="item2">2</label>
<label for="item3">3</label>
<div class="slider">
  <input type="radio" name="item" id="item1" checked>
  <div class="item">
    <div class="hover">
      <span>1</span>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </div>
  <input type="radio" name="item" id="item2">
  <div class="item">
    <span>2<br>2</span>
  </div>
  <input type="radio" name="item" id="item3">
  <div class="item">
    <span>3<br>3<br>3</span>
  </div>
</div>
text<br>
text

CSS

label{cursor:pointer;}
.slider{
  width:100%;
  position:relative;
  
  border:1px solid #bbb;
  box-sizing:border-box;
}
.item{
  position:relative;
  display:none;
  z-index:0;
  
  background:#fff;
  border:1px solid #555;
  box-sizing:border-box;
}

.slider input{
  margin:0;
  padding:0;
  border:0;
  width:0;
  height:0;
  position:absolute;
}

.slider input:checked+.item{
  display:block;
  z-index:1;
}

.hover{
  position:relative;
  bottom:0;
}
.hover ul{
  position:absolute;
  display:none;
  background:#fff;
  border:1px solid #bbb;
  list-style-type: none;
  padding:0;
  margin:0;
}
.hover:hover ul{
  display:block;
}