JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="outerclip">
        <div class="innerclip">
            <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
        </div>
    </div><div class="outerclip">
        <div class="innerclip">
            <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
        </div>
    </div><div class="outerclip">
        <div class="innerclip">
            <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
        </div>
    </div>
</div>
<div class="row">
    <div class="outerclip">
        <div class="innerclip">
            <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
        </div>
    </div><div class="outerclip">
        <div class="innerclip">
            <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
        </div>
    </div><div class="outerclip">
        <div class="innerclip">
            <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
        </div>
    </div>
</div>
<div class="row">
    <div class="outerclip">
        <div class="innerclip">
            <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
        </div>
    </div><div class="outerclip">
        <div class="innerclip">
            <img...

CSS

.outerclip {
        -webkit-transform: skew(-30deg);
        -ms-transform: skew(-30deg);
        -transform: skew(-30deg);
        overflow: hidden;
        display: inline-block;
        height: 100px;
        margin-right: 40px;
    }
    .innerclip {
        -webkit-transform: skew(50deg);
        -ms-transform: skew(50deg);
        transform: skew(50deg);
        overflow: hidden;
        display: inline-block;
        height: 100px;
    }
    img {
        -webkit-transform: skew(-30deg);
        -ms-transform: skew(-30deg);
        transform: skew(-30deg);
    }
.row {
     margin-bottom: -55px;   
}
.row:nth-child(odd) {
    margin-left:70px;
}