JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<style id='phStyle'>*{margin:0;box-sizing:border-box;}body{background-color:red;}</style>
<style id='animation'></style>
<div class='container'>
<div class='animate'></div>
</div>
<div class='container2'>
<div class='animate2'></div>
</div>
<div class='container3'>
<div class='animate3'></div>
</div>
<div class='container4'>
<div class='animate4'></div>
</div>

JavaScript

var $$=[
	(a,b)=>document.querySelectorAll(a).forEach(b),
  (a,...b)=>$$[0](a,i=>i.innerHTML+=b.join('')),
  (a,b)=>$$[0](a,i=>i.innerHTML="")+$[0](a,i=>i.innerHTML+=b),
  (a,b)=>$$[0](a,i=>i.style+=b),
  (a,b)=>{
  	for(i=0;i<a;i++){
    	b.call(a[i],i)
    }
  }
],
seconds=10;

$$[1]('#phStyle',`
*{margin:0 auto;box-sizing:border-box;}
.container,.container2,.container3,.container4{float:left;}
.animate,.animate3{float:right}
.animate2,.animate4{float:left}
.animate,.animate2{top:200px}
.animate {
  width: 100px;
  height: 100px;
  margin:0 auto;
  background-color: red;
  position:relative;

  /* Standard syntax */
  animation-name: example;
  animation-duration: ${seconds}s;
  animation-timing-function: linear ease-in-out;
  animation-iteration-count: infinite;
}

.container{
	background-color:white;
  width:300px;
  height:300px;
  margin:0 auto;
}
.animate2 {
  width: 100px;
  height: 100px;
  margin:0 auto;
  background-color: red;
  position:relative;

  /* Standard syntax */
  animation-name: example2;
  animation-duration: ${seconds}s;
  animation-timing-function: linear ease-in-out;
  animation-iteration-count: infinite;
}

.container2 {
	background-color:white;
  width:300px;
  height:300px;
  margin:0 auto;
}
.animate3 {
  width: 100px;
  height: 100px;
  margin:0 auto;
  background-color: red;
  position:relative;

  /* Standard syntax */
  animation-name: example3;
  animation-duration: ${seconds}s;
  animation-timing-function: linear ease-in-out;
  animation-iteration-count: infinite;
}

.container3 {
	background-color:white;
  width:300px;
  height:300px;
  margin:0 auto;
}
.animate4 {
  width: 100px;
  height: 100px;
  margin:0 auto;
  background-color: red;
  position:relative;

  /* Standard syntax */
  animation-name: example4;
  animation-duration: ${seconds}s;
  animation-timing-function: linear ease-in-out;
  animation-iteration-count: infinite;
}

.container4 {
	background-color:white;
  width:300px;
  height:300px;
  margin:0...