JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="header">
<span>
<span>First</span>
</span>
<span>
<span>Second</span>
</span>
<span class="active">
<span>Thrid</span>
</span>
</div>
<div class="body">
<div class="Control1">
Content!
</div>
</div>
</div>
CSS
.container
{
height: 300px;
border: black 1px solid;
}
.container > .header
{
background: grey;
}
.container > .header > span
{
display: inline-block;
padding: 10px;
}
.container > .header > .active
{
background: black;
color: white;
}
.container > .body
{
height: 100%;
overflow: auto;
background: lightgrey;
}