JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div class="wrap"></div>
    </div>

CSS

body{
padding:50px;
}

.wrapper{
display:inline-block;
overflow:hidden;
}
.wrap{
width:400px;
min-height:50px;
background:red;
margin-top:10%;
position:relative;

}

.wrap:before{
content:'';
position:absolute;
top:-20%;
left:50%;
margin-left:-75%;
width:150%;
height:150%;
border-radius:75%;
background:red;
}