JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
        <ul>
            <li><a href="#"><p>Home</p></a></li>
            <li><a href="#"><p>About me</p></a></li>
            <li><a href="#"><p>My works</p></a></li>
            <li><a href="#"><p>Blog</p></a></li>
            <li><a href="#"><p>Contact me</p></a></li>
            
            <div style="clear:both"></div>
        </ul>
</div>

CSS

#menu,
#menu img {
-moz-user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}

#menu ul li {
-webkit-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
padding: 10px;
padding-bottom: 50px;
float: left;
color: white;
font-size: 13px;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 25ms linear;
-moz-transition: all 25ms linear;
-ms-transition: all 25ms linear;
-o-transition: all 25ms linear;
transition: all 25ms linear;
}

#menu ul li:hover {
margin-top: -5px;
position: relative;
z-index: 1;
}

#menu ul li:nth-child(1) {
background-color: #333333;
padding-bottom: 30px;
}

#menu ul li:nth-child(2) {
background-color: #333745;
-webkit-transform: rotate(-10deg); 
-moz-transform: rotate(-10deg);
}

#menu ul li:nth-child(2) p {
-webkit-transform: rotate(10deg); 
-moz-transform: rotate(10deg);
}

#menu ul li:nth-child(3) {
background-color: #77c4d3;
-webkit-transform: rotate(4deg); 
-moz-transform: rotate(4deg);
}

#menu ul li:nth-child(3) p {
-webkit-transform: rotate(-4deg); 
-moz-transform: rotate(-4deg);
}

#menu ul li:nth-child(4) {
background-color: #daede2;
-webkit-transform: rotate(1deg); 
-moz-transform: rotate(1deg);
}

#menu ul li:nth-child(4) p {
-webkit-transform: rotate(-1deg); 
-moz-transform: rotate(-1deg);
}

#menu ul li:nth-child(5) {
background-color: #ea2e49;
-webkit-transform: rotate(-5deg); 
-moz-transform: rotate(-5deg);
}

#menu ul li:nth-child(5) p {
-webkit-transform: rotate(5deg); 
-moz-transform: rotate(5deg);
}