JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Menu 1</li>
    <li>Super Menu 2</li>
    <li>Menu x3</li>
    <li>Not a menu</li>
    <li>Menu 1</li>
    <li>Hyper Menu 1</li>
</ul>

CSS

ul{
    width:150px;
    padding:20px;
}
li{
    border:solid 1px silver;
    margin-bottom:3px;
    padding:10px 0;
    text-align:center;
    cursor:pointer;
    -moz-transition: -moz-transform 0.5s ease-in;
    -o-transition: -o-transform 0.5s ease-in;
    -webkit-transition: -webkit-transform 0.5s ease-in;
    transition: transform ease-in;
    position:relative;
    background:white;
}

li:nth-child(odd):hover{
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg); 
    -o-transform: rotate(5deg); 
    transform:rotate(5deg); 
    z-index:1;
}
li:nth-child(even):hover{
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg); 
    -o-transform: rotate(-5deg); 
    transform:rotate(-5deg); 
    z-index:1;
}