JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="circle">
      <div id="small-circle">
      </div>
  </div>
</div>

CSS

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#circle {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color:green;
  border-radius: 50%;
}

#small-circle{
  margin-top: 25%;
  margin-left: 24%;
  position: absolute;
  width: 45%;
  height: 45%;
  background-color: #4d4d4d;
  border-radius: 50%;   
  border:10px solid black;
}