JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="shape"></div>
</div>

CSS

#wrap {
    background:#ccc;
    padding:20px;
}
#shape {
    width:250px;
    height:250px;
    
    position:relative;
    overflow:hidden;
}

#shape:before {
    content:" ";
    position:absolute;
    width:100%;
    height:100%;
    left:0; top:-50%;
    border-radius:50%;
    box-shadow:0 0px 0 250px #448ccb
}