JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Lorem ipsum</a></li>
</ul>

CSS

a {
    padding: 10px;
    display: block;
    width: 200px;
    background: #C4F1FF;
    font: 1em Arial;
    color: #B2929C;
    -webkit-transition: background 2s ease-in, padding-right 1s linear, color 1s ease-in;
}

a:hover, a:focus {
    padding-right: 40px;
    background: #CC9CAA;
    color: #FFFDDD;
    -webkit-transition: background 0.1s ease-in, padding-right 0.1s linear, color 0.1s ease-in;
}

JavaScript

-