JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trapezoid1">
  Designing Something
</div>
<br/>
<div id="trapezoid2">
  Designing Opposite
  <!-- I need the text in proper place which currently isn't -->
</div>

CSS

#trapezoid1 {
	height: 0;
 width: 350px;
 border-bottom: 190px solid rgb(2, 145, 178);
 border-left: 45px solid transparent;
 border-right: 45px solid transparent;
 padding: 0 8px 0 0;
 display:block;
 position:relative;
}
#trapezoid2 {
	height: 0;
 width: 350px;
 border-top: 190px solid rgb(252, 59, 73);
 border-left: 45px solid transparent;
 border-right: 45px solid transparent;
 padding: 0 8px 0 0;
 display:block;
 position:relative;
}