JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trapezoid1">
  Designing Something
</div>
<br/>
<div id="trapezoid2">
  <span id="trap2-text">Designing Opposite</span>
  <!-- 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;
}

#trap2-text {
  position: absolute;
  top: -190px;
  left: -25px;
}