JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

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

CSS

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

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

#small-circle{
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #e5e5e5;
  border-radius: 50%;
}