JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuitem">Products</div>

CSS

.menuitem {
    background: #000;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    position: relative;
    margin-left:20px;
    cursor: pointer;
}

.menuitem:before {
    left: -20px;
    position: absolute;
    width: 0; 
	height: 0; 
	border-right: 0px solid transparent;
	border-left: 20px solid transparent;
	border-top: 22px solid black;
    content: '';
}

.menuitem:after {
    position: absolute;
    width: 0; 
	height: 0; 
	border-left: 0px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 22px solid black;
    content: '';
}

.menuitem:hover {
    background: brown;
}

.menuitem:hover:after {
    border-bottom-color: brown;
}

.menuitem:hover:before {
    border-top-color: brown;
}