JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Menu 1</li>
    <li class="active">Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>

CSS

body {
    background-color:#E7D7B7;
}
ul li {
    display:inline-block;
    float:left;
    margin-right:10px;
    position:relative;
    padding:5px 50px 5px 5px;
}
ul li.active {
    display:inline-block;
    float:left;
    background-color:#CA8E26;
    margin-right:10px;
    position:relative;
    padding-right:50px;
}
li.active:after {
    border-style: solid;
    border-width: 0 28px 28px 0;
    border-color: transparent #E7D7B7 transparent transparent;
    content:"";
    position:absolute;
    top:0;
    right:0;
}