JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tab">
    <li><a href="#tab1">tab1</a>

    </li>
    <li><a href="#tab2">tab2</a>

    </li>
    <li><a href="#tab3">tab3</a>

    </li>
    <li><a href="#tab4">tab4</a>

    </li>
</ul>
<div class="content">
    <div class="area" id="tab1">Tab1
        <br />Tab1
        <br />Tab1
        <br />Tab1
        <br />
    </div>
    <div class="area" id="tab2">Tab2
        <br />Tab2
        <br />Tab2
        <br />Tab2
        <br />
    </div>
    <div class="area" id="tab3">Tab3
        <br />Tab3
        <br />Tab3
        <br />Tab3
        <br />
    </div>
    <div class="area" id="tab4">Tab4
        <br />Tab4
        <br />Tab4
        <br />Tab4
        <br />
    </div>
</div>

CSS

.tab, .tab li, .tab li a {
    float: left;
    padding:3px;
    margin-right:2px;
}
.content {
    clear: both;
    overflow: hidden;
    width: 300px;
    border:1px solid #eee;
    height:300px;
}
.area {
    display: none;
}
.tab li.active {
    background: #eee;
}
.tab li.active a {
    color:red;
}