JSFiddle - React, Tailwind, and code Playground

by arunberti

HTML

<div id="nav">
    <ul>
        <li><a>hello</a></li>
        <li><a>bye</a></li>
        <li><a>the</a></li>
   </ul>
</div>

CSS

li {
    display: inline-block;
    background-color: green;
    width: 45px;
    text-align: center;
    float:left;
}

#bounce {
    background-color: red;
    width: 50px;
    height: 50px;
}

JavaScript

$(document).ready(function(){
        $('li a').hover(function() { //mouse in
            $(this).parent().effect("bounce", { times:3 }, 'normal');
        }, function () {
            $(this).parent().effect("bounce", { times:3 }, 'normal');
        });
});