JSFiddle - React, Tailwind, and code Playground

by agconti

HTML

<ul>
    <li>Navigation</li>
    <li id="shop">
        <span>Shop</span> by Style
    </li>
    <li>Navigation</li>
</ul>

CSS

ul {list-style: none;}
li {
    display: inline-block; 
    padding: 1em; 
    position: absoulte; 
    -webkit-transition: all 0.5s ease-out;
}
li span { -webkit-transition: all 0.5s ease-out;}
#shop:hover li { -webkit-transform: translate(-10px,10px);}
#shop:hover span { background: black; color: white; padding: 5px; }