JSFiddle - React, Tailwind, and code Playground

by sophtwhere

HTML

<body>

<div class="scaled">


<div class="spinner newton centered" id="newton">
    <div class="ball"></div><div class="ball"></div><div class="ball"></div><div class="ball"></div><div class="ball"></div>
  </div>
  
</div>
  
  </body>

CSS

/* NEWTON'S BALLS */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.scaled{
    zoom: 3;
    -moz-transform: scale(3);
}

@-webkit-keyframes newtonBallFirst {
  0% { -webkit-transform: rotate(70deg); }
  50% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-webkit-keyframes newtonBallMiddle {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(0deg); }
  51% { -webkit-transform: rotate(-0.5deg); }
  52% { -webkit-transform: rotate(0.5deg); }
  53% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-webkit-keyframes newtonBallLast {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-70deg); }
}
@keyframes newtonBallFirst {
  0% { transform: rotate(70deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes newtonBallMiddle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  51% { transform: rotate(-0.5deg); }
  52% { transform: rotate(0.5deg); }
  53% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes newtonBallLast {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(-70deg); }
}

.spinner.newton .ball {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 6em;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.spinner.newton .ball::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  border-radius: 100%;
  background: radial-gradient(circle at 40% 40%, rgb(79, 77, 77) 39%, rgb(55, 55, 55) 42%);
}

.spinner.newton .ball::before {
  content: '';
  position: absolute;
  width: 0.08em;
  margin-left: -0.04em;
  top: 0;
  left: 50%;
  bottom: 1em;
  background: linear-gradient(transparent, gray);
}

.spinner.newton .ball...