JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">

</div>

CSS

.a {
  border-radius:50%;
  background:#f00;
  width:80px;
  height:80px;
  display: flex;
  justify-content: center;
}
.a:before {
  content:'';
  display: block;
  border-radius: 50%;
  background:#00f;
  width:80%;
  height: 80%;
  align-self: center;
}