JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <a href="#one">one</a><a href="#two">two</a><a href="#three">three</a><a href="#four">four</a>
<ul class="tabs-content">
    <li id="one">1
    </li>
    <li  id="two">2
    </li>
    <li id="three">3
    </li>
    <li  id="four">4
    </li>
</ul> 
</div>

CSS

body{
    padding:16px;            
}

.tabs {
 display:inline-block;   
}

a {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding:0 32px;
    height:24px;
    background:#f0f0f0;
    text-decoration:none;
    color:#2d2d2d;
}

a:hover{
    background:#e0e0e0;
}

ul{ 
  background: #e0e0e0;  
  display:block;
  min-height: 80px;
  height:80px;  
  overflow:hidden;    
}

li{
    display:block;
    min-height: 80px;
    height:80px;
    
}