JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

CSS

ul {
    float: left;
}

li {
    float: left;
    list-style: none;
}

a {
    position: relative;
    float: left;
    padding: 10px 10px 10px 20px;
    background: rgba(210,210,210,1);
}

a:after {
    content:"";
    float: left;
    position: absolute;
    z-index: 1;
    top: 0;
    right: -10px;
    border-color: transparent transparent transparent rgba(150,150,150,1);
    border-style: solid;
    border-width: 20px 0 20px 10px;
}