JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top"></div>
<div class="bottom"></div>

CSS

div {
  height: 30px;
  overflow: hidden;
}

div::before {
  display: block;
  content: '';
  height: 600px;
  width: 600px;
  background: black;
  border-radius: 50%;
  margin-left: -150px;
}

.bottom::before {
  margin-top: -570px;
}