JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="listaanimada">
    <li><a href="">ZonaW</a></li>
    <li><a href="">Recursos</a></li>
    <li><a href="">Para</a></li>
    <li><a href="">Webmasters</a></li>
</ul>

CSS

#listaanimada li a {
    cursor: pointer;
    -webkit-transition: padding-left 280ms ease-out;
    -moz-transition: padding-left 280ms ease-out;
}

#listaanimada li a:hover {
    padding-left: 20px;
}