JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trapezium"><p>text would go here...</p></div>

CSS

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
   border-bottom-left-radius: 100%40px;
   border-bottom-right-radius: 100%40px;

}

p {
    color: white;
    padding: 20px 0; 
    font-size: 14px;
    text-align: center;
}