JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="aninoob-firework aninoob-firework0">
  <div class="aninoob-fireworks firework-red-orange">
    <div class="aninoob-firework-spark sparkfront"></div>
    <div class="aninoob-firework-spark sparkback"></div>
    <div class="aninoob-firework-spark sparkleft"></div>
    <div class="aninoob-firework-spark sparkright"></div>
  </div>
  <div class="aninoob-fireworks firework-red-blue">
    <div class="aninoob-firework-spark sparkfront"></div>
    <div class="aninoob-firework-spark sparkback"></div>
    <div class="aninoob-firework-spark sparkleft"></div>
    <div class="aninoob-firework-spark sparkright"></div>
  </div>
  <div class="aninoob-fireworks firework-green-blue">
    <div class="aninoob-firework-spark sparkfront"></div>
    <div class="aninoob-firework-spark sparkback"></div>
    <div class="aninoob-firework-spark sparkleft"></div>
    <div class="aninoob-firework-spark sparkright"></div>
  </div>
  <div class="aninoob-fireworks firework-yellow-blue">
    <div class="aninoob-firework-spark sparkfront"></div>
    <div class="aninoob-firework-spark sparkback"></div>
    <div class="aninoob-firework-spark sparkleft"></div>
    <div class="aninoob-firework-spark sparkright"></div>
  </div>
</div>
<div class="aninoob-firework aninoob-firework1">
  <div class="aninoob-fireworks firework-red-orange">
    <div class="aninoob-firework-spark sparkfront"></div>
    <div class="aninoob-firework-spark sparkback"></div>
    <div class="aninoob-firework-spark sparkleft"></div>
    <div class="aninoob-firework-spark sparkright"></div>
  </div>
  <div class="aninoob-fireworks firework-red-blue">
    <div class="aninoob-firework-spark sparkfront"></div>
    <div class="aninoob-firework-spark sparkback"></div>
    <div class="aninoob-firework-spark sparkleft"></div>
    <div class="aninoob-firework-spark sparkright"></div>
  </div>
  <div class="aninoob-fireworks firework-green-blue">
    <div class="aninoob-firework-spark sparkfront"></div>
    <div...

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  perspective:500px;
  background-color:#000000;
  background-image:url(https://s-media-cache-ak0.pinimg.com/originals/90/9a/1c/909a1cb139394a79e081bc3a73119e4f.jpg);
  background-size:cover;
}
.aninoob-firework{
  transform-style:preserve-3d;
  position:absolute;
  top:50%;
  left:50%;
  height:0px;
  width:0px;
}
.aninoob-firework0{
  transform:translateX(-300px) translateZ(-400px);
}
.aninoob-firework1{
  transform:translateX(0px) translateZ(100px);
}
.aninoob-firework2{
  transform:translateX(300px) translateZ(-200px);
}
.aninoob-fireworks{
  transform-style:preserve-3d;
  position:absolute;
  top:50%;
  left:50%;
  height:0px;
  width:0px;
  animation: aninoobfireworks 5s infinite forwards;
}
.aninoob-firework-spark{
  width:20px;
  height:20px;
  background-color:#ffcc00;
  transform-style:preserve-3d;
  position:absolute;
  
}
.aninoob-fireworks.firework-red-orange .aninoob-firework-spark{
 animation: aninoobfireworkredorange 1s infinite forwards;
}
@keyframes aninoobfireworkredorange {
  0% { background-color:#cc0000; }
  100% { background-color:#ff9900; }
}
.aninoob-fireworks.firework-red-blue .aninoob-firework-spark{
 animation: aninoobfireworkredblue 1s infinite forwards;
 margin-left:-20px;
 animation-delay: 1.2s;
}
.aninoob-fireworks.firework-red-blue .aninoob-firework-spark:after{
 animation-delay: 1.3s;
}
@keyframes aninoobfireworkredblue {
  0% { background-color:#cc0000; }
  100% { background-color:#00CCFF; }
}
.aninoob-fireworks.firework-green-blue .aninoob-firework-spark{
 animation: aninoobfireworkgreenblue 1s infinite forwards;
 margin-left:20px;
 animation-delay: 1.7s;
}
.aninoob-fireworks.firework-green-blue .aninoob-firework-spark:after{
 animation-delay: 1.8s;
}
@keyframes aninoobfireworkgreenblue {
  0% { background-color:#00FF00; }
  100% { background-color:#00CCFF; }
}
.aninoob-fireworks.firework-yellow-blue .aninoob-firework-spark{
 animation: aninoobfireworkyellowblue 1s...