JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topdiv"></div>
<div id="bottomdiv">
    <div id="halfcircle"></div>
</div>

CSS

#topdiv {
    height: 50px;
    background: lightblue;
}
#bottomdiv {
    position: relative;
    height: 50px;
    background: black;
}
#halfcircle {
    position: absolute;
    height: 30px;
    width: 30px;
    top: -15px;
    left: 47%;
    background: lightblue;
    border-radius: 100% 100%;
}