JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul id="listnav">
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
    <li><a href="">link 3</a></li>
</ul>

</body>

CSS

#listnav {
list-style-type: none;
float: right;
padding: 0;
margin: 0;
} 

#listnav a:link, a:visited {
display: block;
color: #ffffff;
background-color: #111111;
height: 20px;
width: 220px;
text-align: left;
padding: 3px;
margin:0 15px 5px 10px;
text-decoration: none;
position: relative;
border: none;
}

#listnav a:hover, a:active {
background-color: #462530;
color: #e2d276;
}

#listnav a:before {
content: "";  
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 8px solid #111111;
position: absolute; left: -8px; top: 0;
border-radius: 1px;
padding: 0;
}

#listnav a:hover:before {
border-right-color: #462530;
}