JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner1">Rounded Top? No</div>
    <div id="inner2">No Rounding</div>
    <div id="inner3">Rounded Bottom? No</div>
</div>

SCSS

body {
    background:#33F;
}
div {
    text-align:center;
}
#outer {
    border-radius:20px;
    width:60%;
    margin:auto;
    margin-top:10px;
    border:1px solid #000;
}
#inner1 {
    background:#FFF;
    border-radius: 20px 20px 0 0;
}