JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    
    <div class="left-corner">Left</div>
    <div class="right-corner">Right</div>
    <div class="center-corner">Center</div>
    
    
    
    
    
    
</div>

CSS

.wrapper
{
   width:100%
   height:110px;
    overflow:hidden;
    border:solid 5px black;
    border-radius:25px;
}
.left-corner
{
   background:red;
   width:110px;
   height:110px;
   float:left
}
.right-corner
{
   background:green;
   width:110px;
   height:110px;
   float:right
}


.center-corner{
width:100%;
    background:yellow;
    height:110px;
}