JSFiddle - React, Tailwind, and code Playground

by qustosh

HTML

<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>

CSS

#block1{width:100px;height:100px;background:red;position:relative}
#block2{width:100px;height:100px;background:blue;position:relative}
#block3{width:100px;height:100px;background:green;position:relative}

JavaScript

//TEST REQUEST ANIM FRAME
 window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
})();

var red = $("#block1").css({left:"0px",right:"0px"});
var blue = $("#block2");
var green = $("#block3");


function drawRed(){
    red.css({left:"+=2"});
}
function animate(){
    window.requestAnimFrame(animate)
    drawRed();    
}
//animate();