JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="busy">
    <li class="busy-dot1"><b class="busy-dot-shine">Version1</b></li>
    <li class="busy-dot2"><b class="busy-dot-shine">Version1</b></li>
    <li class="busy-dot3"><b class="busy-dot-shine">Version1</b></li>
    <li class="busy-dot4"><b class="busy-dot-shine">Version1</b></li>
    <li class="busy-dot5"><b class="busy-dot-shine">Version1</b></li>
</ul>

CSS

.busy {
    list-style: none;
    padding: 0;
    position: relative;
    width:100px;
}

.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 150px;
    top: 50px;
    -webkit-animation: rot 4s linear infinite;
    animation: rot 4s linear infinite;
}

.busy-dot2 {
    -webkit-animation-delay: -3.5s;
    animation-delay: -3.5s;
}
.busy-dot3 {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}
.busy-dot4 {
    -webkit-animation-delay: -2.7s;
    animation-delay: -2.7s;
}

.busy-dot-shine {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
    background-color: #193987;
    height: 20px;
    width: 20px;
}
.busy-dot2 .busy-dot-shine {
    height: 15px;
    width: 15px;
}
.busy-dot3 .busy-dot-shine {
    height: 10px;
    width: 10px;
}
.busy-dot4 .busy-dot-shine {
    height: 6px;
    width: 6px;
}

@-webkit-keyframes rot {
    0% {-webkit-transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5);   
        opacity: 0.5;}
   25% {-webkit-transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5);
        opacity: 0.8;}
   50% {-webkit-transform: scaleX(2) rotate(180deg) translateX(50px) scale(1) rotate(-180deg) scaleX(0.5);
        opacity: 0.5;}
   75% {-webkit-transform: scaleX(2) rotate(270deg) translateX(50px) scale(0.8) rotate(-270deg) scaleX(0.5);
   opacity: 0.2;}
  100% {-webkit-transform: scaleX(2) rotate(360deg) translateX(50px) scale(1) rotate(-360deg) scaleX(0.5);
  opacity: 0.5;}
}

@keyframes rot {
    0% {transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5);   
        opacity: 0.5;}
   25% {transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5);
        opacity: 0.8;}
   50% {transform: scaleX(2) rotate(180deg) translateX(50px) scale(1)...