JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
    <div class="top">
        <a class="tab" value="1">Link1</a>
        <a class="tab" value="2">Link2</a>
        <a class="tab" value="3">Link3</a>
    </div>
    <div class="content">
        <div id="content">
            <div class="block" style="background:#b0b;">content1 content1 content1content1content1 content1content1content1content1content1conte nt1content1content1content  1content1content1content1con tent1content1content1conten content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte content1 content1 content1content1content1 content1content1content1content1content1conte  t1content1content1content1content1content1co ntent1content1</div>
            <div class="block" style="background:#bb0;">content2</div>
            <div class="block" style="background:#0bb;">content3 </div>
        </div>
    </div>
    <div class="bottom">
        footer
    </div>
</div>

CSS

*
{
    padding:0px;
    margin:0px;
}
html,body
{
    height:100%;
}
.tab
{
    cursor:pointer;
}
.body
{
    position:relative;
    margin:0px auto;
    width:1200px;
    height:100%;
    min-height:310px;
    background:#eee;
}
.top
{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:50px;
    background:#eee;
    border-bottom:1px solid #bbb;
    z-index:2;
}
.content
{
    position:relative;
    padding:0px 0px;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:100%;
    min-height:200px;
    overflow:hidden;
    background:#ddd;
    z-index:1;
}
.bottom
{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    background:#eee;
    border-top:1px solid #bbb;
    z-index:2;
}

#content
{
    position:absolute;
    top:55px;
    left:0px;
    bottom:55px;
    width:1200px;
    background:#bbb;
}
.block
{
    position:relative;
    float:left;
    width:400px;
    min-height:200px;
    height:100%;
    overflow:auto;
}

JavaScript

$('a.tab').live('click',function()
{
    var left = (parseInt($(this).attr('value'))-1)*400
    $('#content').animate({'left':'-'+left+'px'})
})