JSFiddle - React, Tailwind, and code Playground

HTML

<style>
.menu > li{
	display: inline;
	list-style-type: none;
	border: 1px solid #FFFFFF;
	background-color: #FF0000;
	color: #FFFFFF;
	padding: 5px 8px 5px 27px;
    margin: 0;
    position: relative;
    margin-right: 2px;
}
.menu > li:first-child{
    padding: 5px 15px;
}
.menu > li > span:first-child{
    position: absolute;
    top: 0;
    right: -20px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #FF0000;
    border-bottom: 15px solid transparent;
    z-index: 9;
}
.menu > li > span:last-child{
    position: absolute;
    top: 0;
    right: -22px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #FFFFFF;
    border-bottom: 15px solid transparent;
    z-index: 8;
}
</style>

<ul class="menu">
    <li>Inicio<span></span><span></span></li><li>Servicio<span></span><span></span></li>
</ul>