JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

CSS

body {
    overflow:hidden;
}
div {
    position:absolute;
}

JavaScript

var i        = 0,
    maxNodes = 5000,
    node, nodes, frag, max, radius, margin, size, opacity;
 
/**
 * Generate a random hex color code. 
 * Thanks to Paul Irish for posting this (16777215 == ffffff in decimal)
 * http://www.paulirish.com/2009/random-hex-color-code-snippets/
 * 
 * @returns {String} Our hex color code
 */
function hex() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16).toUpperCase();
}
 
/** 
 * Returns a random number within a range.
 * @param   {Int} min
 * @param   {Int} max
 * @returns {Int} Our random number
 */
function rand (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
 
// Create a DOM node that isn't part of the DOM tree. 
// https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment
frag = document.createDocumentFragment();
 
// Append a bunch of empty divs to the document fragment
for (; i < maxNodes; i++) {
    
    node = document.createElement('div');
    
    // Random size, shape, and styling
    radius  = rand(2,20);
    size    = rand(5,25);
    shadow  = rand(2,7);
    opacity = rand(1,20) * .1;
    
    // Random color
    node.style.backgroundColor    = hex();
 
    // Size it
    node.style.width              = size + 'px';
    node.style.height             = size + 'px';
 
    // Position it
    node.style.top                = rand(0,500) + 'px';
    node.style.left               = rand(0,500) + 'px';
 
    // Cross-browser shadow
    node.style.boxShadow          = shadow + 'px ' + shadow + 'px ' +shadow + 'px ' + ' rgba(0,0,0,' + opacity + ')';
    node.style.MozBoxShadow       = shadow + 'px ' + shadow + 'px ' +shadow + 'px ' + ' rgba(0,0,0,' + opacity + ')';
    node.style.WebkitBoxShadow    = shadow + 'px ' + shadow + 'px ' +shadow + 'px ' + ' rgba(0,0,0,' + opacity + ')';
    
    // Cross browser rounded corners
    node.style.borderRadius       = radius + 'px';
    node.style.MozBorderRadius    = radius + 'px';
   ...