JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Snake man</li>
    <li>Gemini man</li>
    <li>Shadow man</li>
    <li>Spark man</li>
</ul>

CSS

/* irrelevant */

li {
    cursor: pointer;
}

body {
    font-family: helvetica;
}

selected{
  
}

JavaScript

window.addEvent('domready', function(){

  $$('li').each(function(li){
    li.addEvent('mouseenter', function(){  
      li.tween('padding-left', 20);
    }).addEvent('mouseleave', function(){
      li.tween('padding-left', 0);
    }).addEvent('mouseenter', function(){
    li.addClass('selected')
    }
    );
  });

});