JSFiddle - React, Tailwind, and code Playground

by Geoffrey

HTML

<ul>
    <li><a href="#">Plop 1</a></li>
    <li><a href="#">Plop 2</a></li>
    <li><a href="#">Plop 3</a></li>
</ul>

CSS

ul, li {
    padding:0;
    margin:0;
}
a {
    display:inline-block;
    padding: 5px 10px;
    margin: 2px 1px;
    color:#fff;
    background: rgba(0,0,0, 0.5);
    text-decoration:none;
    font-variant: small-caps;
}

JavaScript

$(document).ready(function(){
 
    $('a').hover(function(){
        $(this).stop().animate({'margin-left':'20px'}, 400);
    },function(){
        $(this).stop().animate({'margin-left':'0px'}, 400);    
    });
    
});