JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
        <li><a class="active" href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

CSS

body {
    background-color: blue;
}

li {

}

a {    
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    display: block;   
    padding: 0.25em 0.5em;
    color: white;
    
    background-color: black; 
    margin-bottom: 0.5em;
    -moz-border-radius-topleft:: 5px; 
    -moz-border-radius-bottomleft:: 5px; 

    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

a.active {
    background-color: white;   
    color: black;
}

#nav {
    width: 100px;
    padding-top: 100px;
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0,
        M21=-0.174532925, M22=1);
    transform: skewY(-10deg);   
}