JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/timohausmann/quadtree-js/master/quadtree.js"></script>
<div id="canvasContainer">
            <canvas id="canvas" width="400" height="300"></canvas>
</div>

CSS

* {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                padding: 40px;
                background: #333;
            }
            #canvasContainer {
                background: #111;
            }
            #canvasContainer canvas {
                display: block;
                margin: 0 auto;
                background: #000;
            }

JavaScript

(function(w, M) {
    
    w.requestAnimFrame = (function () {
        return  w.requestAnimationFrame ||
            w.webkitRequestAnimationFrame ||
            w.mozRequestAnimationFrame ||
            w.oRequestAnimationFrame ||
            w.msRequestAnimationFrame ||
            function (callback) {
                w.setTimeout(callback, 1000 / 60);
            };
    })();
    
    var ctx = document.getElementById('canvas').getContext('2d');
    
    
    /*
     * the main Quadtree
     */
    var myTree = new Quadtree({
        x: 0,
        y: 0,
        width: 400,
        height: 300
    });
    
    /*
     * our objects will be stored here
     */
    var myObjects = [];
                
    /*
     * our "hero"
     */
    var myHero = {
        x : 0,
        y : 0,
        width : 20,
        height : 20
    };
    
    
    /*
     * create some objects and save them in myObjects
     */
    var createObjects = function() {
        for( var i=0;i<200;i=i+1 ) {
            myObjects.push({
                x : randMinMax(10, 390),
                y : randMinMax(10, 290),
                width : randMinMax(10, 20),
                height : randMinMax(10, 20),
                vx: randMinMax(-1,1),
                vy: randMinMax(-1,1),
                check : false
            });
        }
    };
    
    
    /*
     * draw Quadtree nodes
     */
    var drawQuadtree = function( node ) {
        var     bounds = node.bounds;
    
        //no subnodes? draw the current node
        if( node.nodes.length === 0 ) {
            ctx.strokeStyle = 'rgba(255,0,0,0.2)';
            ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
            
        //has subnodes? drawQuadtree them!
        } else {
            for( var i=0;i<node.nodes.length;i=i+1 ) {
                drawQuadtree( node.nodes[ i ] );
            }
        }
    };
    
    /*
     * draw all objects in a given node 
     */
    var drawObjects = function( node ) {
   ...