JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li>Home</li>
    <li>Posts</li>
    <li>About</li>
    <li>Contact</li>
</ul>

CSS

body {font-family:arial;font-style:bold}
      a {color:#666; text-decoration:none}
        #menu {list-style:none;width:160px;padding-left:10px;}
        #menu li {margin:0;padding:5px;cursor:hand;cursor:pointer}

JavaScript

(function($){
    $.fn.extend({ 
        //plugin name - animatemenu
        animateMenu: function(options) {
 
            var defaults = {
                animatePadding: 60,
                defaultPadding: 10,
                evenColor: '#ccc',
                oddColor: '#eee',
            };
             
            var options = $.extend(defaults, options);
         
            return this.each(function() {
                  var o =options;
                  var obj = $(this);                
                  var items = $("li", obj);
                   
                  $("li:even", obj).css('background-color', o.evenColor);               
                  $("li:odd", obj).css('background-color', o.oddColor);                   
                   
                  items.mouseover(function() {
                      $(this).stop(true).animate({paddingLeft: o.animatePadding}, 300);
                     
                  }).mouseout(function() {
                      $(this).stop(true).animate({paddingLeft: o.defaultPadding}, 300);
                     
                  });
            });
        }
    });
})(jQuery);
     

    $(document).ready(function() {
        $('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
    });