JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class='rhombus'><div class='clipper'></div></li>
</ul>

CSS

.rhombus {
 
    margin-left:55px;
    margin-top: 25px;
   width: 200px; 
   height: 75px;
   background: blue;
   /* Skew */
   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   transform: skew(-20deg);
}