JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">

    <div id="cover-left"></div>
    <div id="cover-right"></div>
</div>

CSS

body {
 background: #1e66ed;   
}

#header {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 10px auto; 
  background: #fff;  
  -webkit-border-top-left-radius: 200px;
  -webkit-border-top-right-radius: 200px;
  -moz-border-radius-topleft: 200px;
  -moz-border-radius-topright: 200px;
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
}

#cover-left,
#cover-right {
   position: absolute;
   top: 0;
   height: 100%;   
   background: #1e66ed;    
   width: 50px;
}

#cover-left {
   left: 0;   
}

#cover-right {
   right: 0;   
}