JSFiddle - React, Tailwind, and code Playground

by Ghokun

HTML

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<div class="tabs">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>

CSS

.tabs {
    width: 700px;
    position: fixed;
    bottom: -80px;
    left: 140px;
}
.tabs ul {
    display: block;
}
.tabs li {
    float: left;
    width: 80px;
    height: 140px;
    padding: 10px;
    list-style: none;
    text-align: center;
    overflow: hidden;
    background-color: #ccc;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
}

JavaScript

$(document).ready(function(){
    
    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });
    
    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({marginTop:'-60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
    
    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({marginTop:'0px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
    
});