JSFiddle - React, Tailwind, and code Playground

by wjddyd66

HTML

<ul>
    <li class="c" id="id1">One</li>
    <li class="c">Two</li>
    <li class="c">Three</li>
    <li class="c">Four</li>
</ul>

CSS

li {
    font-size: 20px;
    padding: 10px 20px;
    cursor: default;
    -webkit-transition: padding-left 400ms ease; 
       -moz-transition: padding-left 400ms ease; 
         -o-transition: padding-left 400ms ease; 
        -ms-transition: padding-left 400ms ease; 
}

.c:hover {
    padding-left: 40px;
}

#id1:hover{
  padding-left: 100px;
}