JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<div class="tab-control">
    <a href="#tab1">tab1</a>
    <a href="#tab2">tab2</a>
    <a href="#tab3">tab3</a>
</div>
<div class="tabs">
    <div id="tab1" class="tab">This is a tab1</div>
    <div id="tab2" class="tab">This is a tab2</div>
    <div id="tab3" class="tab">This is a tab3</div>
</div>

CSS

.tab-control a{
    display:inline-block;
    text-decoration:none;
    color:#FFF;
    height:20px;
    width:40px;
    text-align:center;
    line-height:20px;
    background:rgba(70,121,189,0.75);
}
.tab-control a:hover{
    background:rgba(70,121,189,1);
}
.tabs{
    position:relative;
    border:1px solid red;
    height:200px;
    width:135px;
    overflow:hidden;
}
.tab{
    height:100%;
    width:100%;
}
:target{
    display:block;
}