JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 60 60">
<g transform="translate(30,30)">
<g id="ring_0">
  <circle cx="0.00000" cy="10.00000" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="1.73648" cy="9.84808" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="3.42020" cy="9.39693" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="5.00000" cy="8.66025" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="6.42788" cy="7.66044" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="7.66044" cy="6.42788" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="8.66025" cy="5.00000" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="9.39693" cy="3.42020" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="9.84808" cy="1.73648" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="10.00000" cy="-0.00000" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="9.84808" cy="-1.73648" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="9.39693" cy="-3.42020" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="8.66025" cy="-5.00000" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="7.66044" cy="-6.42788" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="6.42788" cy="-7.66044" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="5.00000" cy="-8.66025" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="3.42020" cy="-9.39693" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="1.73648" cy="-9.84808" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-0.00000" cy="-10.00000" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-1.73648" cy="-9.84808" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-3.42020" cy="-9.39693" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-5.00000" cy="-8.66025" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-6.42788" cy="-7.66044" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-7.66044" cy="-6.42788" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-8.66025" cy="-5.00000" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle cx="-9.39693" cy="-3.42020" r="0.45" fill="hsl(120,100%,50%)"/>
  <circle...

CSS

body { background: black; padding: 0; margin: 0; }
g#ring_0 { -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); transform:rotate(5deg); }
g#ring_1 { -webkit-animation:second 3s ease-in-out infinite; -moz-animation:second 3s ease-in-out infinite; animation:second 3s ease-in-out infinite; }
g#ring_2 { -webkit-animation:third 3s ease-in-out infinite; -moz-animation:third 3s ease-in-out infinite; animation:third 3s ease-in-out infinite; }
g#ring_3 { -webkit-animation:fourth 3s ease-in-out infinite; -moz-animation:fourth 3s ease-in-out infinite; animation:fourth 3s ease-in-out infinite; }
g#ring_4 { -webkit-animation:fifth 3s ease-in-out infinite; -moz-animation:fifth 3s ease-in-out infinite; animation:fifth 3s ease-in-out infinite; }
g#ring_5 { -webkit-animation:sixth 3s ease-in-out infinite; -moz-animation:sixth 3s ease-in-out infinite; animation:sixth 3s ease-in-out infinite; }
g#ring_6 { -webkit-animation:seventh 3s ease-in-out infinite; -moz-animation:seventh 3s ease-in-out infinite; animation:seventh 3s ease-in-out infinite; }
g#ring_7 { -webkit-animation:eighth 3s ease-in-out infinite; -moz-animation:eighth 3s ease-in-out infinite; animation:eighth 3s ease-in-out infinite; }
g#ring_8 { -webkit-animation:ninth 3s ease-in-out infinite; -moz-animation:ninth 3s ease-in-out infinite; animation:ninth 3s ease-in-out infinite; }
g#ring_9 { -webkit-animation:tenth 3s ease-in-out infinite; -moz-animation:tenth 3s ease-in-out infinite; animation:tenth 3s ease-in-out infinite; }
@-webkit-keyframes second { 100% { -webkit-transform:rotate(10deg) } }
@-webkit-keyframes third { 100% { -webkit-transform:rotate(20deg) } }
@-webkit-keyframes fourth { 100% { -webkit-transform:rotate(30deg) } }
@-webkit-keyframes fifth { 100% { -webkit-transform:rotate(40deg) } }
@-webkit-keyframes sixth { 100% { -webkit-transform:rotate(50deg) } }
@-webkit-keyframes seventh { 100% { -webkit-transform:rotate(60deg) } }
@-webkit-keyframes eighth { 100% { -webkit-transform:rotate(70deg) }...