JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="cell c1">
    <h3>heading</h3>
    <button>button</button>
  </div>
  <div class="cell c2">
    <h3>heading</h3>
    <button>button</button>
  </div>
  <div class="cell c3">
    <h3>heading</h3>
    <button>button</button>
  </div>
  <div class="cell c4">
    <h3>heading</h3>
    <button>button</button>
  </div>
</div>

CSS

.grid {
  display: flex;
  justify-content: space-between;
  padding: 0 90px;
  width: 75%;
  overflow: hidden;
}

.cell {
  width: 25%;
  flex-grow: 1;
  height: 300px;
  position: relative;
  transform:skewX(30deg);
  overflow: hidden;
}

.c1:before {
  background-image: url(http://wallpaperscraft.ru/image/park_gazon_trava_derevya_solnce_15215_1920x1080.jpg);
 }
 .c2:before {
  background-image: url(http://naturewp.com/wp-content/uploads/2016/04/Lake-Louise-Wallpaper-E4O4U.jpeg);
 }
 .c3:before {
  background-image: url(https://rugeroi.ru/wp-content/uploads/2016/09/prir-0989081273821983.jpg);
 }
 .c4:before {
  background-image: url(https://img1.goodfon.ru/original/1600x900/2/8d/les-derevya-osina-tuman-dymka.jpg);
 }
 
.c1:before,
.c2:before,
.c3:before,
.c4:before {
  position: absolute;
  display: block;
  content: "";
  background-size: cover;
  top: 0;
  transform:skewX(-30deg);
  bottom: 0;
  left: -90px;
  right:90px;
  width:300%;
}

.cell h3 {
  color: white;
  position: absolute;
  top: 15px;
  left:15px;
  transform:skewX(-30deg);
}

.cell button {
  position: absolute;
  bottom: 15px;
  left:15px;
  transform:skewX(-30deg);
}