JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <div class="tab-container">
        <div id="info" class="tab">I<br/>N<br/>F<br/>O</div>    
    </div>
    <div class="tab-container">
        <div id="news" class="tab">N<br/>E<br/>W<br/>S</div>    
    </div>
    <div class="tab-container">
        <div id="shop" class="tab">S<br/>H<br/>O<br/>P</div>    
    </div>
</div>

CSS

#tabs{
    position:fixed;
    top:0;
    left:0;
    height:100%;   
    z-index:1; /*force new stack for other than Chrome22*/    
}
.tab-container{
    position:absolute;
    top:0;
    left:-500px;
    height:100%;
    width:530px;      
}
.tab{
    position:absolute;
    z-index:2;
    left:510px;    
    cursor:pointer;
    background-color:#ddd; 
}
.tab:hover{
    background-color:#ff9900;
}
#info{
    top:0px;
}
#news{
    top:100px;
}
#shop{
    top:200px;
}