JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<ul>
    <li><a href="#"><span>menu</span></a></li>
    <li><a href="#"><span>menu</span></a></li>
    <li><a href="#"><span>menu</span></a></li>
    <li><a href="#"><span>menu</span></a></li>
</ul>

CSS

ul{
    text-align: center;
    font-size: 0;
    height: 50px;
    background: #ccc;
}
ul > li{
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}
ul > li a{
    display: block;
    color: #000;
    text-decoration: none;
    line-height: 50px;
    padding: 0 20px;    
    -webkit-transform: skew(-15deg) translate3d(0,0,0);
    transform: skew(-15deg) translate3d(0,0,0);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
ul > li a span{
    display: block;
    -webkit-transform: skew(15deg) translate3d(0,0,0);
    transform: skew(15deg) translate3d(0,0,0);
}
ul > li a:hover{
    background: orange;    
}