JSFiddle - React, Tailwind, and code Playground

HTML

<div class="q1">
  <div class="q2"></div>
  <div class="q3"></div>
</div>

CSS

.q1{
    width:100%;
    border-radius:10px;
    overflow:hidden;
}
.q2{
    background-color:blue;
    width:100%;
    height:40px;
    border-radius:10px 10px 0 0;
}
.q3{
    background-color:red;
    width:100%;
    height:140px;
     border-radius: 0 0 10px 10px;
}