JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navi">
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
</ul>

CSS

.navi{
list-style:none;
    margin-top:40px;
}

.navi li{
float:left;
    margin-left:-10px;
}

.navi li a{
background:#000;
    padding:0px 40px;
    line-height:40px;
    display:block;
    color:#fff;
    -moz-transform: rotate(-60deg);
}