JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square">
  <div class="circle"></div>
</div>
<div class="square">
  <div class="circle"></div>
</div>

CSS

.square {
  width:50px;
  height:50px;
  border:1px solid black;
  display:inline-block;
  margin:10px;
}
.circle{
  background-color:green;
  border-radius: 50%;
  width:10px;
  display:block;
  margin:auto;
  }

/* .outer {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.circle {
  background-color:green;
  border-radius: 50%;
  width:20%;
  margin: auto;
}
.circle:before{
  content: "";
  display: block;
  padding-top: 100%; 	controls the aspect ratio
} */