JSFiddle - React, Tailwind, and code Playground

HTML

<div >
    <div class="testClass">HOME</div>
    <div class="testClass">ABOUT US</div>
    <div class="testClass">CONTACT</div>
    <div class="testClass">LOGIN</div>
    <div class="testClass">SERVICES</div>
</div>

CSS

div {
    float:left;   
    background-color:#fff;    
  
}
.testClass {
    margin-top: 0px;
    margin-left: 0px;
    width: 100px;
    height: 63px;
    zoom: 1;
    display: block;
    background-repeat: no-repeat;
    background: #fff;

}
.testClass:hover {
    background: #eaebea;
    -webkit-transform: skew(-20deg);
    /* Old browsers */
    background: -moz-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebea), color-stop(100%, #d6d7d5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eaebea 0%, #d6d7d5 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5', GradientType=0);
    /* IE6-9 */
}