JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circone">
  <div class="cism" id="twoa"> </div>
  <div class="cism" id="twob"> </div>
  <div class="cism" id="twoc"> </div>
  <div class="cism" id="twod"> </div>
  <div class="cism" id="twoe"> </div>
</div>

CSS

#circone{
  margin: 100px;
  position: relative;
  background-color: #f00;
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

.cism {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

#twoa {transform: translate(70px, -80px);background-color:#0f0}
#twob {transform: translate(145px, -60px);background-color:#00f}
#twoc {transform:translate(200px, -5px);background-color:#ff0}
#twod {transform:translate(220px, 70px);background-color:#f0f}
#twoe {transform:translate(200px, 145px);background-color:#0ff}