JSFiddle - React, Tailwind, and code Playground

by djdiego88

HTML

<ul id="animateList">
    <li><a href="">Enlace 1</a></li>
    <li><a href="">Enlace 2</a></li>
    <li><a href="">Enlace 3</a></li>
    <li><a href="">Enlace 4</a></li>
    <li><a href="">Enlace 5</a></li> 
</ul>

CSS

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

#animateList li a:hover {
    padding-left: 10px;
}