JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">

<div class=li>
    <a href="#">
            <div class="pane">
                <div class="verticaltext">Home</div>
            </div>
    </a>
    <div class="content">1</div>
</div>
<div class=li><a href="#"><span>
<div class="pane"><div class="verticaltext">About</div></div></span></a><div class="content">2</div></div>


<div class=li><a href="#"><span>
<div class="pane"><div class="verticaltext">Overview</div></div></span></a><div class="content">3</div></div>


<div class=li><a href="#"><span>
<div class="pane"><div class="verticaltext">Services</div></div></span></a><div class="content">4</div></div>


<div class=li><a href="#"><span>
<div class="pane"><div class="verticaltext">Contact</div></div></span></a><div class="content">5</div></li

</div>

CSS

#navigation{
    position:absolute;
    display:block;
    top:100px;
    width:1000px;
    height:400px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#333;

}

#navigation a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#FFF;

}

#navigation a:hover{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#FFF;


}



#navigation .li{
    border-right:thin #FFF solid;
    display:inline;
    float:left;
}

.pane{
    position:relative;
    display:block;
    height:400px;
    width:50px;
    background-color:#09F;
    float:left;
}

.verticaltext {
    position:absolute;
    display:block;
    width:50px;
    bottom:50px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
    font-weight:bold;
    color:#FFF;
    text-align:center;
    letter-spacing:-1px;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
}

.content{
    width:400px;
    height:400px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    background-color:#FFF
}

JavaScript

$('.content').hide();
$('.content:first').show(); 


$('a').click(function(){

  $('.content').hide();
  $(this).next('.content').animate({'width':'toggle'}, 'slow')
});