JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trapezoid">
  <p>Here is some text inside the shape.</p>
</div>

CSS

#trapezoid {
  border-left: 25px solid transparent;
  border-radius: 10px;
  border-right: 25px solid transparent;
  border-top: 100px solid rgba(114, 230, 245, 0.3);
  height: 0;
  width: 100px;
}

#trapezoid p {
  margin-top:-80px;
  text-align: center;
}