JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<link rel="stylesheet" href="///ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
 <section id="content">
              <nav>
                    <ul>
                        <li id="selected">Home</li>
                        <li style="margin-left:35px;"><a href="about_alabama_bunker.html" title="Learn about Alabama Bunker" class="shake">About</a></li>
                        <li style="margin-left:5px;"><a href="services_offered.html" title="Services offered by Alabama Bunker" class="shake">Services</a></li>
                        <li style="margin-left:5px;"><a href="security_bunker_products.html" title="Product catalog" class="shake">Products</a></li>
                        <li style="margin-left:25px;"><a href="contact_alabama_bunker.html" title="Get in touch with our sales staff for inquiries, comments or suggestions" class="shake">Contact</a></li>
                    </ul>
              </nav>

          </section>

JavaScript

$(document).ready(function() {
    $('a.shake').hover(function(event) {
        $(this).css({
            'color': 'ff0000'
        }, {
            duration: 'slow',
            easing: 'easeOutBounce'
        }).animate({
            left: 25
        }, {
            duration: 'fast',
            easing: 'easeOutBounce'
        }).animate({
            left: 0
        }, {
            duration: 'fast',
            easing: 'easeOutBounce'
        });
    });
});