JSFiddle - React, Tailwind, and code Playground

HTML

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

<a href="https://i.imgur.com/D82lydb.png" target="_blank">expected output</a>

CSS

.container {
  position: absolute;
  left: 50%;
  top: 50%;
}

.circle {
  border-radius:50%;
  border: 1px solid black;
  position:absolute;
}

.circle:first-child{
  width: 50px;
  height: 50px;
}

.circle:nth-child(2){
  width: 80px;
  height: 80px;
}

.circle:nth-child(3){
  width: 110px;
  height: 110px;
}

.circle:nth-child(4){
  width: 140px;
  height: 140px;
}

.circle:last-child{
  width: 170px;
  height: 170px;
}