JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span></span>
</div>

CSS

div{
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
  position:relative;
}
div span{
  position:absolute;
  display:block;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#fff;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}