JSFiddle - React, Tailwind, and code Playground

HTML

<div class="white">
  <div class="circle"></div>
</div>
<div class="main">
  <div class="black1"></div>
  <div class="black2"></div>
</div>

CSS

body{
  background-color: #000;
  margin: 0;
}
.white{
  position: relative;
  width: 100%;
  height: 20vh;
  background-color: #fff;
}
.circle {
  width: 80px;
  height: 80px;
  background-color: #fff;
  position: absolute;
  left: 45%;
  bottom: -31px;
  border-radius: 100%;
}
.main{
  position: relative;
}
.black1{
  position: absolute;
  top: -8px;
  width: 46%;
  height: 20px;
  background-color: #777;
  border-radius: 0 20px 0 0;
}
.black{
  position: absolute;
  background-color: #777;
  top: -8px;
  width: 45%;
  height: 50px;
}