JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="active">home</li>
    <li>about</li>
    <li>contact</li>
</ul>

CSS

li {
    float: left;    
    list-style-type: none;
    padding: 5px;
    border: 1px solid;
    display: inline-block;
    transform:skewX(10deg));
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    -o-transform: skewX(10deg);
}

li.active {
    background: #99FFFF;
}