JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper wrapper1"></div>
<div class="wrapper wrapper2"></div>
<div class="wrapper wrapper3"></div>

CSS

.wrapper{
    height: 100px;  
}
.wrapper1{
    background-color: pink;
}
.wrapper3{
    background-color: blue;
}
.wrapper2{
    background: url(http://img0.joyreactor.cc/pics/post/full/anon-%D0%9A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0-2191131.jpeg) no-repeat center / cover;
    -moz-transform: skewY(-2deg);
    -webkit-transform: skewY(-2deg);
    transform: skewY(-2deg);
}