JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-item"> <div class="inner">Products</div> </div>

CSS

.menu-item{
    transform: skew(20deg, 0deg);
    -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    display:inline-block;
    padding: 10px;
}

.menu-item:hover {
    background-color:#1a0000;
    color:white;
}

.inner{
    transform: skew(-20deg, 0deg);
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
}