JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

CSS

.circle {
  position: absolute;
}
.circle:nth-child(1) {
  width: 2em;
  height: 2em;
  border-radius: 2em;
  top: 45vh;
  left: 51vw;
  -webkit-animation: hover_1 infinite 15s ease-in-out;
          animation: hover_1 infinite 15s ease-in-out;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  background-image: -webkit-radial-gradient(circle at top left, #33ffff, #003333);
  background-image: radial-gradient(circle at top left, #33ffff, #003333);
  opacity: .6;
}
.circle:nth-child(2) {
  width: 2em;
  height: 2em;
  border-radius: 2em;
  top: 47vh;
  left: 38vw;
  -webkit-animation: hover_2 infinite 7s ease-in-out;
          animation: hover_2 infinite 7s ease-in-out;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  background-image: -webkit-radial-gradient(circle at top left, #ffffff, #8c8c8c);
  background-image: radial-gradient(circle at top left, #ffffff, #8c8c8c);
  opacity: .6;
}
.circle:nth-child(3) {
  width: 3em;
  height: 3em;
  border-radius: 3em;
  top: 51vh;
  left: 66vw;
  -webkit-animation: hover_3 infinite 14s ease-in-out;
          animation: hover_3 infinite 14s ease-in-out;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  background-image: -webkit-radial-gradient(top left, circle, #ff8e7a, #7a1300);
  background-image: radial-gradient(circle at top left, #ff8e7a, #7a1300);
  opacity: .6;
}
.circle:nth-child(4) {
  width: 1em;
  height: 1em;
  border-radius: 1em;
  top: 50vh;
  left: 31vw;
  -webkit-animation: hover_4 infinite 11s ease-in-out;
          animation: hover_4 infinite 11s ease-in-out;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
 ...