JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    
</ul>

CSS

body{
 background-color:black;   
    color:white;

}

ul{
    margin-top:60px;
 list-style:none;   
}


li{
 border:1px solid gray;   
    width:60px;
    padding:10px;
    margin-top:5px;
    margin-left:50px;
    background-color:rgba(255,255,255,0.2);
    position:relative; 
    top:0px;
    left:0px;
    
  transition: top 2s, left 2s;
-moz-transition: top 2s, left 2s; 
-webkit-transition:top 2s, left 2s; 
-o-transition: top 2s, left 2s;

}

li:hover{
left:10px;
top:-10px;
}