JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
<li><a class="current-menu-item" href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
</ul>

CSS

ul#nav {
    padding:20px;
}

ul#nav li {
    float:left;
    margin-right:20px;
    display:inline-block;
    zoom:1;
    *display:inline;
    position:relative;
}

ul#nav li a {
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
    transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -webkit-transform: skew(-10deg);
    color:#757575;
}

ul#nav li a:hover {
    background:#f3f1eb;
}

ul#nav li a.current-menu-item {
    color:#fff;
    background:#5d9732;
}

ul#nav li a.current-menu-item:hover {
    background:#5d9732;
}