JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Download</li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    background: #3866BC;
    padding: 10px 20px;
    font: 1em/1.2 Tahoma;
    text-decoration: none;
    color: #fff;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

ul li:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1;
    width: 20px;
    height: 100%;
    background: #3866BC;
    border-right: 3px solid #fff;
    border-radius: 0 20px 20px 0;
}

ul li:hover, ul li:hover:after {
    background: #5197D5;
}

ul li:not(:first-child) {
    padding-left: 40px;
}