JSFiddle - React, Tailwind, and code Playground

HTML

<div class="q1">
<div class="q2"></div>
<div></div>
</div>

CSS

.q1{position:relative;overflow:hidden;}
.q1:before,
.q1:after{position:absolute;content:'';display:block;background:blue;z-index:-1;}
.q1:before{width:400px;height:140px;left:0;top:0;}
.q1:after{height:110px;width:300px;transform: skew(0,19deg);top:81px;right:0;}

.q1{
  width:400px;
  height:200px;
  *background:blue;
}
.q2{
  float:left;
  margin-top:120px;
  width:100px;
  height:20px;
  background:black;
}
.q2+div{
	float:left;
  margin-top:150px;
	width:177px;
	height:20px;
	background:#000;
	transform: skew(0,19deg);
}