JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fondoheader"></div>
    <div class="barra">
        <div class="circulo"></div>
        
    </div>
    
    <div class="contenido"></div>

CSS

html,body{
	padding:0;
	margin:0;
	height:100%;
	width:100%;
}

.fondoheader{
	background-color:#333;
	width:100%;
	height:180px;
}

.barra{
	background-color:#CCC;
	width:100%;
	height:80px;
    position:relative;
}

.circulo{
	background-color:yellow;
	width:300px;
	height:300px;
	-webkit-border-radius: 150px 150px 150px 150px;
    position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
box-shadow: 0 0 4px rgba(0,0,0,.3);
}