JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="menu">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
</ul>

CSS

#menu { margin: 40px; }

#menu li { float: left; }
#menu li a {
    background: #e1e1e1;
    border: 1px dashed #999;
    padding: 20px;
    float: left;
    position: relative;
}

JavaScript

// Note that jquery UI is only enabled because of the "easeOutBack" easing.
// That can also be achieved with jquery easing plugin, which is better to use
// If you don't need jquery UI for anything else.

$(document).ready(function() {

    var speed = 400,
        easing = 'easeInOutBack';

    $("#menu li a").on({

        mouseenter: function() {

            $(this).animate({
                
                paddingBottom: 40,
                top: -20
                
            }, speed, easing);

        },    
        mouseleave: function() {
            $(this).animate({
                
                paddingBottom: 20,
                top: 0
                
            }, speed, easing);
        }
    });
});