JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>

CSS

.b1, .b2, .b3 {
  width: 100%;
  height: 200px;
}

.b1 {
  background: red;
}

.b2 {
  background: blue;
  position: relative;
  overflow: hidden;
}

.b2:after {
  content: "";
  left: -50px;
  top: -50px;
  position:relative;
  display: block;
  background: red;
  height: 120px;
  width: 200%;
  transform: rotate(5deg);
}

.b3 {
  background: yellow;
}