JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stripe">
<div class="rec">
</div>
<div class="circle">
</div>
</div>

CSS

body{margin: 0;}
.stripe {
  background-color: #B7B7B7;
  height: 100px;
}
.rec{
  width: 100px;
  height: 100px;
  background-color: white;
}
.circle {
	border-radius: 50%;
	width: 100px;
	height: 100px;
  background-color: white;
  position: absolute;
  left: 50px;
  top: 0;
	/* width and height can be anything, as long as they're equal */
}