JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-container info">
    <div id="info" class="tab">I<br/>N<br/>F<br/>O</div>    
</div>

<div class="tab-container news">
    <div id="news" class="tab">N<br/>E<br/>W<br/>S</div>    
</div>

<div class="tab-container shop">
    <div id="shop" class="tab">S<br/>H<br/>O<br/>P</div>    
</div>

CSS

.tab-container{
    position:fixed;
    top:0;
    left:-500px;
    height:100%;
    width:530px;      
}
.tab{
    position:absolute;
    z-index:21;
    text-align:center;
    font-size:14px;
    line-height:20px;    
    left:510px;    
    cursor:pointer;
    display:block;
    background-color:#ddd; 
}
.tab:hover{
    background-color:#ff9900;
}
.info{
    top:0px;
}
.news{
    top:100px;
}
.shop{
    top:200px;
}