JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circleTemplate"></div>
<img class="test1" />
<img class="test2" />
<img class="test3" />
<img class="test4" />
<img class="test5" />

CSS

.circleTemplate { /* just for demo */
    border-radius:50%; 
    width: 200px; 
    height:200px; 
    border: 1px solid black; 
    
    top: 50px;
    left: 75px; 
    position:absolute; 
    
}

img {
    position: absolute;
    transform-origin; center center;
}
.test1 {
  width: 40px;
  height: 40px;
  left: 236.9152044288992px;
  top: 72.64235636489539px;
  background-color: cyan;
  transform: rotate(10deg);
}
.test2 {
  width: 60px;
  height: 30px;
  left: 162.36481776669305px;
  top: 36.5192246987792px;
  background-color: red;
  transform: rotate(20deg);
}
.test3 {
  width: 90px;
  height: 20px;
  left: 43.39745962155612px;
  top: 90px;
  background-color: yellow;
  transform: rotate(30deg);
}
.test4 {
  width: 40px;
  height: 70px;
  left: 104.99999999999996px;
  top: 201.60254037844385px;
  background-color: blue;
}
.test5 {
  width: 20px;
  height: 90px;
  left: 207.26182617406997px;
  top: 195.630778703665px;
  background-color: green;
  transform: rotate(45deg);
}