JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

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

CSS

.menu-item{
    /* transform: skew(150deg, 150deg); */
/*     -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg); */
    transform: skew(-60deg);
    display:inline-block;
    padding: 10px;
    background-color:#1a0000;
    color: yellow;
    width: 200px;
    height: 200px;
    margin: 80px 0 0 80px;
}


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