JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
    <li class="rotate"><a href="#tab1" class="nororate">One</a>

    </li>
    <li class="rotate"><a href="#tab2" class="nororate">Two</a>

    </li>
</ul>

CSS

.rotate {
    position: relative;
    width: 90px;
    height: 70px;
}
.rotate:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    background: #0D6385;
    z-index:-1;
}
.nororate {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 50px;
    height: 50px;
}
li {
    display:block;
    float:left;
    
}