JSFiddle - React, Tailwind, and code Playground

HTML

<div class=some-container3>
  <div class=some-container>
    <div class=box1>
    </div>
    <div class=box2-container>
      <div class=box2>
      </div>
    </div>
  </div>

  <div class=some-container2>
    <div class="box1 replace1">
    </div>
    <div class="box2-container replace2">
      <div class="box2 replace3"></div>
      <div class="box3"></div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107 107" class="box4">
          <circle class="box4-circle" cy=50% cx=50% r=50 stroke=white fill=none></circle>
        </svg>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #0a0a0a;
}


.some-container {
  position: relative;
  display: inline-block;
}

.some-container2 {
  position: relative;
  display: inline-block;
  margin-left: 80px;
}

.some-container3 {
  position: relative;
  top: 30px;
  left: 30px;
}

.box1 {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
}

.box2-container {
  display: flex;
  position: relative;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  border: darkgreen solid 1px;
  box-sizing: border-box; /* Because of the border */
  
}

@keyframes box2-rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.box2 {
  width: 40px;
  height: 40px;
  border: 2px solid blue;
  position: absolute;
  border-radius: 50%; 
  border-color: blue blue blue transparent;
  border-width: 2px;
  animation: box2-rotation 3s linear infinite;
}


.replace1 {
  width: 30px;
  height: 30px;
}

.replace2 {
  width: 30px;
  height: 30px;
}

.replace3 {
  width: 60px;
  height: 60px;
}

.box3 {
  width: 80px;
  height: 80px;
  border: 2px solid;
  position: absolute;
  border-radius: 50%; 
  border-color: green green green transparent;
  border-width: 2px;
  animation: box2-rotation 4s linear infinite;
}

.box4 {
  width: 120px;
  height: 120px;
  position: absolute;
  animation: box4-rotation 6s linear infinite;
}

@keyframes box4-rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.box4-circle {
  stroke-dasharray: 52.275;
  stroke-width: 2px;
  animation: box4-rotateion 6s linear infinite;
  animation-fill-mode: both;
  transform-origin: center;
}