JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li class="opened"><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>
<article>
    <p>    
    </p>
</article>

CSS

nav{
    width:300px;
    height:120px;
    margin:100px auto 0;
    box-shadow:#666 5px 5px 10px;
}
ul{
    list-style:none;
}
li{
    float:left;
    position:relative;
    z-index:0;
    width:90px;
    height:100px;
    margin:30px 5px 0;
    background:#666;
    box-shadow:#000 2px 2px 5px;
}
a{
    display:block;
    height:100%;
}
article{
    position:relative;
    z-index:0;
    width:300px;
    height:250px;
    margin:0 auto;
    border:1px solid #fff;
    background:#333;
    box-shadow:#666 5px 5px 10px;
}
p{
    width:100%;
    height:100%;
    box-shadow:#000 0px -1px 2px;
}
.opened{
    z-index:2;
}

JavaScript

$(document).ready(function(){
    $('nav li').click(function(){
    if($(this).attr('class') != 'opened'){
        $('nav li[class$=opened]').stop(true).animate({margin: '0px 5px'},{complete: function(){$(this).removeClass('opened')}, duration: 500}).animate({margin: '30px 5px'});
        $(this).delay(500).animate({margin: '0px 5px'},{complete: function(){$(this).addClass('opened')}, duration: 500}).animate({margin: '30px 5px'});
    }
    });
});