JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <li>
        <a href="#">Hello</a>
        <span></span>
    </li>
</nav>

CSS

nav li a {
float: left;
height: 23px;
line-height: 24px;
position: relative;
padding: 1px 10px 0 24px;
color: #fff;
background-color: #393233;
text-align: center;
width:75%;
}
nav li a:before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-color: white #393233 white white;
  border-style: solid;
  border-width: 12px 12px 12px 12px;
 }
nav li a:after {
content: "";
float: left;
position: absolute;
top: 0;
right: -12px;
width: 0;
height: 0;
border-color: #393233 transparent #393233 #393233;
border-style: solid;
border-width: 12px 12px 12px 12px;
}

span {
  position: absolute;
  float:left;
  background-color: transparent;
  border-color: transparent transparent transparent #393233;
  border-style: solid;
  border-width: 12px 12px 12px 23px;
 }

nav li  { list-style-type:none; width:200px; }
nav li a { text-decoration:none;}