JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
</ul>

CSS

#menu {
    float: left;
    margin-top: 120px;
}

#menu li {
    padding: 10px;
    background: #333;
    color: #fff;
    float: left;
    clear: both;
    cursor: pointer;
}

JavaScript

$("#menu li").each(function(){
    
    $(this).hover(function () {
        
        $(this).stop(true,true)
            .animate({paddingLeft: '+=17' }, 4, 'easeOutBack');
        
      }, function () {
          
        $(this).stop(true,true)
            .animate({ paddingLeft: '-=17' }, 4, 'easeOutBack');
          
      }
    );

});