JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div class="para" id="p1"></div>
    <div class="para" id="p2"></div>
    <div class="para" id="p3"></div>
</div>

CSS

.para{
    width: calc(33.3% - 10px);
    height: 30px;
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
    margin: 0 5px;
    background-color: rgba(0,0,0, 1);
    float: left;
}
#p1{
    background-color: rgba(255,0,0, .5);
}
#p2{
    background-color: rgba(0,255,0, .5);
}
#p3{
    background-color: rgba(0,0,255, .5);
}
#wrap{
    margin: auto;
    width: 90%;
}