JSFiddle - React, Tailwind, and code Playground

by Pointy

HTML

<div class=container>
    <input>
    <br>
    <button class=toggle>Toggle Background</button>
</div>

CSS

body {
    background-color: blue;
    text-align: center;
}
.container {
    position: relative;
    display: inline-block;
    margin-top: 100px;
}
.shape {
    position: absolute;
    background-color: white;
}
.noshapes .shape {
    display: none;
}

JavaScript

for (var i = 0; i < 2000; ++i) {
    $("<div/>", {
        "class": "shape",
        css: {
            transform: "translate(" + Math.random() * 1000 + "px, " + Math.random() * 1000 + "px)",
            opacity: Math.random() * 5 / 100,
            height: Math.random() * 200 + "px",
            width: Math.random() * 200 + "px"
        }
    }).prependTo("body");
}

$(document).on("click", ".toggle", function () {
    $("body").toggleClass("noshapes");
});