JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

html, body {
  height: 100%;
}
div.outer {
  width: 600px;
  height: 250px;
  background: linear-gradient(to bottom,blue 50%,red 0px);
  padding: 20px 0;
  overflow: hidden;
}
div.inner {
  height: 100%;
  border-radius: 50%;
  background: white;
  margin: 0 -50px;
}