JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="w1"></div>
    <div id="w2"></div>
    <div id="w3"></div>
    <div id="w4"></div>
    <div id="w5"></div>
    <div id="w6"></div>
    <div id="w7"></div>
    <div id="w8"></div>
</body>

CSS

div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: red;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

#w1 { animation-name: s1; animation-delay: 0.0s; -webkit-animation-name: s1; -webkit-animation-delay: 0.0s }
#w2 { animation-name: s2; animation-delay: 0.5s; -webkit-animation-name: s2; -webkit-animation-delay: 0.5s }
#w3 { animation-name: s3; animation-delay: 1.0s; -webkit-animation-name: s3; -webkit-animation-delay: 1.0s }
#w4 { animation-name: s4; animation-delay: 1.5s; -webkit-animation-name: s4; -webkit-animation-delay: 1.5s }
#w5 { animation-name: s5; animation-delay: 2.0s; -webkit-animation-name: s5; -webkit-animation-delay: 2.0s }
#w6 { animation-name: s6; animation-delay: 2.5s; -webkit-animation-name: s6; -webkit-animation-delay: 2.5s }
#w7 { animation-name: s7; animation-delay: 3.0s; -webkit-animation-name: s7; -webkit-animation-delay: 3.0s }
#w8 { animation-name: s8; animation-delay: 3.5s; -webkit-animation-name: s8; -webkit-animation-delay: 3.5s }

@keyframes s1 { from {top: 100px; left:   0px;} to {top: 100px; left: 200px;} } 
@keyframes s2 { from {top:  62px; left:   8px;} to {top: 138px; left: 192px;} } 
@keyframes s3 { from {top:  29px; left:  29px;} to {top: 171px; left: 171px;} } 
@keyframes s4 { from {top:   8px; left:  62px;} to {top: 192px; left: 138px;} } 
@keyframes s5 { from {top:   0px; left: 100px;} to {top: 200px; left: 100px;} } 
@keyframes s6 { from {top:   8px; left: 138px;} to {top: 192px; left:  62px;} } 
@keyframes s7 { from...