JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="purple"></div>
<div class="medium-blue"></div>
<div class="light-blue"></div>
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="cyan"></div>
<div class="light-green"></div>
<div class="lime"></div>
<div class="magenta"></div>
<div class="lightish-red"></div>
<div class="pink"></div>

CSS

body {
  background: radial-gradient(circle, white, smoke);
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
}
body:active div,
body:active div::before,
body:active div::after {
  padding: 40px;
}

div,
div::before,
div::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.9;
  transform-origin: top;
  transition: all 5s linear 0s;
}

.purple {
  -webkit-animation: purple linear 30s alternate infinite;
          animation: purple linear 30s alternate infinite;
  border: 2px solid #241379;
  border-radius: 100%;
  width: 45px;
  height: 45px;
  transform: translate3d(12vw, 99vh, 0);
  z-index: 9;
}

.purple::before {
  -webkit-animation: purple-pseudo linear 15s alternate infinite;
          animation: purple-pseudo linear 15s alternate infinite;
  background: #241379;
  border: 2px solid #241379;
  width: 11px;
  height: 17px;
  transform: translate3d(85vw, -20vh, 0) rotate(3deg);
}

.purple::after {
  -webkit-animation: purple-pseudo linear 20s alternate infinite;
          animation: purple-pseudo linear 20s alternate infinite;
  border: 2px solid #241379;
  width: 21px;
  height: 49px;
  transform: translate3d(13vw, -92vh, 0) rotate(172deg);
}

@-webkit-keyframes purple {
  50% {
    transform: translate3d(55vw, 62vh, 0);
  }
  100% {
    transform: translate3d(46vw, 40vh, 0);
  }
}

@keyframes purple {
  50% {
    transform: translate3d(55vw, 62vh, 0);
  }
  100% {
    transform: translate3d(46vw, 40vh, 0);
  }
}
@-webkit-keyframes purple-pseudo {
  33% {
    transform: translate3d(-42vw, -54vh, 0) rotate(270deg);
  }
  100% {
    transform: translate3d(-20vw, 52vh, 0) rotate(82deg);
  }
}
@keyframes purple-pseudo {
  33% {
    transform: translate3d(-42vw, -54vh, 0) rotate(270deg);
  }
  100% {
    transform: translate3d(-20vw, 52vh, 0) rotate(82deg);
  }
}
.medium-blue {
  -webkit-animation: medium-blue linear 30s alternate infinite;
          animation: medium-blue linear 30s alternate infinite;
  border:...