JSFiddle - React, Tailwind, and code Playground

by nhuon

HTML

<ul>
<li>qweakasjd</li>
<li>qweakasjd</li>
<li>qweakasjd</li>
<li>qweakasjd</li>
<li>qweakasjd</li>
</ul>

CSS

ul
{
    width:200px;
}

li
{
    font-family: arial;
    font-size: 12px;
    padding: 5px 10px;
    color: #555555;
    
    transition: padding-left 300ms ease-out;
    -moz-transition: padding-left 300ms ease-out;
    -webkit-transition: padding-left 100ms ease-out;
    -o-transition: padding-left 300ms ease-out;    
}

li:nth-child(odd) { background-color:#FDFDFD; }
li:nth-child(even) { background-color:#F2F2F2; }
li:nth-child(odd):hover { background-color:#FAFAFA; }
li:nth-child(even):hover { background-color:#EFEFEF; }

li:hover
{
    padding-left:20px;
    
    transition: padding-left 300ms ease-out;
    -moz-transition: padding-left 300ms ease-out;
    -webkit-transition: padding-left 100ms ease-out;
    -o-transition: padding-left 300ms ease-out;
}