JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.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);
}