JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div">
<div class="box"></div>
</div>

CSS

.div{

 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}

.img{
 background:#e7e7e7;
 border:1px solid #ccc;
 height:178px;
 width:178px;
 -webkit-border-radius:200px;
 -moz-border-radius:200px;
 border-radius:200px;
 position:absolute;
 z-index:3;

 
}