JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>

CSS

ul > li {opacity:.5}

JavaScript

$("li").on('mouseenter',function(){
  $(this).animate({"padding-left": "50px"}, "normal");
});
$("li").on('mouseleave',function(){
  $(this).animate({"padding-left": "0px"}, "slow");
});