JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.q1{
    border-radius:10px;
}
.q2{
    background-color:blue;
    height:40px;
}
.q3{
    background-color:red;
    height:140px;
}

.q1 > :first-child {
    border-radius: 10px 10px 0 0;
}

.q1 > :last-child {
    border-radius: 0 0 10px 10px;
}