JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#alvo1">Âncora para Alvo 1</a></li>
    <li><a href="#alvo2">Âncora para Alvo 2</a></li>
    <li><a href="#alvo3">Âncora para Alvo 3</a></li>
    <li><a href="#alvo4">Âncora para Alvo 4</a><l/i>
</ul>



<div class="tabs">
    
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Aba Um</label>
       
       <div class="content">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non est nulla, ac commodo lectus. Quisque at risus dolor. Mauris nec lectus leo. Suspendisse feugiat sollicitudin vestibulum. Curabitur in arcu et metus blandit scelerisque in non dolor. Ut eu sem ut dolor fringilla lobortis id at sapien. Donec eu est sapien. Phasellus suscipit urna ac massa tempus at pretium neque ullamcorper. Maecenas congue ipsum sed ligula ultricies malesuada sollicitudin tellus blandit. Aliquam fringilla, risus at facilisis rhoncus, nibh lacus sollicitudin nisl, vitae fermentum urna sem quis lacus.<p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non est nulla, ac commodo lectus. Quisque at risus dolor. Mauris nec lectus leo. Suspendisse feugiat sollicitudin vestibulum. Curabitur in arcu et metus blandit scelerisque in non dolor. Ut eu sem ut dolor fringilla lobortis id at sapien. Donec eu est sapien. Phasellus suscipit urna ac massa tempus at pretium neque ullamcorper. Maecenas congue ipsum sed ligula ultricies malesuada sollicitudin tellus blandit. Aliquam fringilla, risus at facilisis rhoncus, nibh lacus sollicitudin nisl, vitae fermentum urna sem quis lacus.<p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non est nulla, ac commodo lectus. Quisque at risus dolor. Mauris nec lectus leo. Suspendisse feugiat sollicitudin vestibulum. Curabitur in arcu et metus blandit scelerisque in non dolor. Ut eu sem ut dolor fringilla lobortis id at sapien. Donec eu est sapien. Phasellus suscipit urna ac...

CSS

.tabs {
  position: relative;   
  min-height: 500px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
  cursor: pointer;
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
  overflow: auto;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}