JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>LOLS</title>
    </head>
    <body>
    </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    background-color: #000;
}

JavaScript

var w = 0,
    h = 0,
    cro = 0; //CurrentlyRenderingObject
var q = []; //RenderQueue
var update = function() {
    w = window.innerWidth;
    h = window.innerHeight;
    for (cro = 0; cro < q.length; cro += 1) {
        q[cro].update();
    }
};
update();
setInterval(update, 1000 / 30);

var destroy = function(o) {
    for (var i = 0; i < q.length; i += 1) {
        if (q[i] === o) {
            q.splice(i, 1);
            if (i <= cro) {
                cro -= 1;
            }
        }
    }
};

var wrap = function(p) {
    if (p.x > w) {
        p.x = 0;
    }
    if (p.y > h) {
        p.y = 0;
    }
    if (p.x < 0) {
        p.x = w;
    }
    if (p.y < 0) {
        p.y = h;
    }
};

var Something = function(args) {
    if (this === window) {
        throw 'Please use the `new` keyword when calling a constructor.';
    }
    var t = this;
    var args = args || {};
    t.pos = args.pos || {
        x: 0,
        y: 0
    };
    t.vel = args.vel || {
        x: 0,
        y: 0
    };
    t.hue = args.hue || (Math.random() * 360);
    t.el = document.createElement('div');
    t.el.style.position = 'fixed';
    t.el.style.opacity = 1;
    t.el.style.width = '10px';
    t.el.style.height = '10px';
    t.el.style.marginLeft = '-5px';
    t.el.style.marginTop = '-5px';
    t.el.style.borderRadius = '5px';
    document.body.appendChild(t.el);
    t.life = Math.random() * 200;
    t.lifespan = t.life;
    return t;
};
Something.prototype = {
    update: function() {
        var t = this;
        t.pos.x += t.vel.x;
        t.pos.y += t.vel.y;
        wrap(t.pos);
        t.el.style.left = t.pos.x + 'px';
        t.el.style.top = t.pos.y + 'px';
        t.el.style.backgroundColor = 'hsla(' + t.hue + ', 100%, 50%, ' + (t.life / t.lifespan) + ')';
        t.life -= 1;
        if (t.life < 1) {
            document.body.removeChild(t.el);
            destroy(t);
            makeParticle();
        }
    }
};

var makeParticle = function() {
    var myThing = new...