JSFiddle - React, Tailwind, and code Playground
HTML
<div id="foobar"></div>
JavaScript
(function(t) {
var s = function(t, s, r, i, e, o, h, c, n) {
this.el = t, this.sharp = !0, this.fs = n, this.filter = "", this.colours = {
c1: s,
c2: r,
c3: r,
shade: i,
alpha: c,
steps: e,
wheel: o,
light: ~~h
}, this.init()
};
s.prototype.init = function() {
if (this.cssPrefix = !1, t.browser.webkit ? this.cssPrefix = "-webkit" : t.browser.mozilla ? this.cssPrefix = "-moz" : t.browser.opera ? this.cssPrefix = "-o" : t.browser.msie && (this.cssPrefix = "-ms"), this.cssPrefix) {
for (var s = this.colours.steps; s > 0;) this.percents = this.percentage(), this.stringBuilder(), this.colourFilter(), s -= 1, s > 0 && (this.filter += ", ");
this.el.css("background-image", this.filter), this.fs && this.fit()
} else console.log("sorry bro, your browser isnt supported.")
}, s.prototype.stringBuilder = function() {
var t = this.colours,
s = this.catcol(t.c1),
r = this.catcol(t.c2),
i = this.catcol(t.c3),
e = this.catcol(t.shade),
o = ~~ (Math.random() * 360);
this.filter += this.cssPrefix + "-linear-gradient(" + o + "deg," + s + " " + this.percents.a + " ," + e + " " + this.percents.b + ", " + r + " " + this.percents.c + ", " + i + " " + this.percents.d + ")"
}, s.prototype.catcol = function(t) {
var s = "rgba(",
r = ")",
i = t.toString();
return s.concat(i).concat(r)
}, s.prototype.fit = function() {
this.el.css({
width: "100%",
height: window.innerHeight
})
}, s.prototype.percentage = function() {
var t = ~~ (Math.random() * 85),
s = t + ~~ (Math.random() * 15),
r = s,
i = 100 - s + ~~ (Math.random() * s),
e = {
a: t + "%",
b: s + "%",
c:...