JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="nin_wrap">


<!-- First shape -->
<div class="shape-1">
  <!-- Content for the first shape goes here -->
</div>

<!-- Second shape -->
<div class="shape-2">
  <!-- Content for the second shape goes here -->
</div>
</div>

CSS

.nin_wrap {
  width: 150px;
  height: 150px;
  position: relative;
  margin: auto;
  margin-top: 20px;
}

.shape-1 { 
position: absolute;
top: 15px;
left: 10px;
z-index: 2;
/* border-radius: 50%; */
  background: red;
  width: 75px;
  height: 75px;
}

.shape-2 {
  position: absolute;
  z-index: 1;
/* border-radius: 50%; */
  background: orange;
  width: 100px;
  height: 100px;
}
/* Define the animation for the first shape */
@keyframes rotate-shape-1 {
  0% {
    transform: rotate(0deg);  /* Initial rotation */
  }
  100% {
    transform: rotate(360deg);  /* Final rotation */
  }
}

/* Define the animation for the second shape */
@keyframes rotate-shape-2 {
  0% {
    transform: rotate(0deg);  /* Initial rotation */
  }
  50% {
    transform: rotate(180deg);  /* Intermediate rotation */
  }
  100% {
    transform: rotate(360deg);  /* Final rotation */
  }
}

/* Apply the animations to the shapes */
.shape-1 {
  animation: rotate-shape-1 2s linear infinite;  /* Rotate the first shape every 2 seconds */
}

.shape-2 {
  animation: rotate-shape-2 4s linear infinite;  /* Rotate the second shape every 4 seconds */
}