JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="ronaContainer">
  <div class="spriteSheet ss1a"></div>
  <div class="spriteSheet ss1b"></div>
  <div class="spriteSheet ss1c"></div>
  <div class="ronaBack"></div>
  <div class="whiteSpriteSheet ss1c"></div>
  <div class="rona"></div>
  <div class="whiteSpriteSheet ss1a"></div>
  <div class="whiteSpriteSheet ss1b"></div>
  <div class="ronaOverlay"></div>
</div>

CSS

/* -------------------- temp - page specific placeholder */
.ronaContainer {
  width: 720px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.ronaOverlay {
    background: rgba(0, 70, 100, .3);
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: inset 0 0 200px #3d4023;
}

.ronaBack {
    background: rgba(180, 18, 18, 0.82);
    width: 100%;
    height: 100%;
    position: absolute;
}

.rona{
  background-image: url('https://i.ibb.co/2yq2wX5/coronavirus.png');
  width: 600px;
  height: 600px;
  display: block;
  position: absolute;
  animation: spinRona 360s linear infinite;
  transform-origin: 290px 200px;
}
@keyframes spinRona {
  0% {transform:rotate(0) translatex(0)}
  50% {transform:rotate(180deg) translatey(-300px)}
  0% {transform:rotate(360deg) translatex(0)}
}

.spriteSheet {
  background: radial-gradient(transparent 0%, rgba(0, 0, 200, 0.3) 41%, transparent 68%);
  border-radius: 80px;
  position: absolute;
}


.whiteSpriteSheet{
  background: radial-gradient(transparent 0%, rgba(255, 255, 255, 0.5) 80%, transparent 68%);
  border-radius: 80px;
  position: absolute;
  transform: scale(.4);
}

.ss1a {
  height: 20px; 
  width: 20px;
  animation: spinRona 100s linear infinite;
  transform-origin: 100px 40px;
  margin-left: 200px;
}
.ss1b {
  height: 30px; 
  width: 30px;
  animation: spinRona 70s linear infinite;
  transform-origin: 200px 40px;
  margin-left: 600px;
  margin-top: -90px;
}
.ss1c {
  height: 25px; 
  width: 25px;
  animation: spinRona 100s linear infinite;
  margin: 400px 600px;
}

.whiteSpriteSheet.ss1a {
  height: 10px; 
  width: 10px;
  animation: spinRona 100s linear infinite;
  transform-origin: 100px 40px;
  margin: 10px 600px;
}
.whiteSpriteSheet.ss1b {
  height: 10px; 
  width: 10px;
  animation: spinRona 70s linear infinite;
  transform-origin: 200px 40px;
  margin: -400px 60px;
}
.whiteSpriteSheet.ss1c {
  height: 10px; 
  width: 10px;
  animation: spinRona 100s linear infinite;
 ...