JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Who We Are & Our Values</a>

    </li>
    <li><a href="#">Our History</a>

    </li>
    <li><a href="#">Our Leadership</a>

    </li>
</ul>

CSS

ul {
    border:1px solid #ccc;
    height: 40px;
    margin: 15px;
    float: left;
    overflow: hidden;
}
li {
    float: left;
    border-left:1px solid #ccc;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
}
li:first-child {
    margin-left: -10px;
    padding-left: 10px;
}
li:last-child {
    margin-right: -10px;
    padding-right: 10px;
}
li:hover {
    background: #00a8b4;
    color: #fff;
}
li > a {
    text-decoration: none;
    display: block;
    position: relative;
    line-height: 40px;
    padding: 0 20px;
    color: #000;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}