JSFiddle - React, Tailwind, and code Playground

by brunogc

HTML

<canvas id="pixie"></canvas>
<div class="container"></div>

CSS

body {
    margin: 0;
    padding: 0
}
#pixie {
    position:fixed;
    background-color: #164979;
    width:100%;
    height:100%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#040429', endColorstr='#257EB7', GradientType=0);
    /* IE6-9 */
    background: -ms-linear-gradient(top, #0E2A55 40%, #0E2A55 40%, #1D6196 60%);
    /* IE10+ */
    background: -webkit-gradient(linear, center top, center bottom, from(#040429), to(#257EB7));
    /* Chrome, Safari 4+ */
    background: -webkit-linear-gradient(center top, #040429, #257EB7) repeat scroll 0 0 rgba(0, 0, 0, 0);
    /* Chrome 10-25, iOS 5+, Safari 5.1+ */
    background: -moz-linear-gradient(center top, #040429, #257EB7) repeat scroll 0 0 rgba(0, 0, 0, 0);
    /* Firefox 3.6-15 */
    background: -o-linear-gradient(center top, #040429, #257EB7) repeat scroll 0 0 rgba(0, 0, 0, 0);
    /* Opera 11.10-12.00 */
    background: linear-gradient(center top, #040429, #257EB7) repeat scroll 0 0 rgba(0, 0, 0, 0);
    /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    margin:0;
    padding:0;
}

JavaScript

function draw() {
    con.clearRect(0, 0, WIDTH, HEIGHT);
    for (var e = 0; e < pxs.length; e++) {
        pxs[e].fade();
        pxs[e].move();
        pxs[e].draw()
    }
}
function Circle() {
    WIDTH = window.innerWidth;
    HEIGHT = window.innerHeight;
    this.s = {
        ttl: 8e3,
        xmax: 5,
        ymax: 2,
        rmax: 10,
        rt: 1,
        xdef: 960,
        ydef: 540,
        xdrift: 4,
        ydrift: 4,
        random: true,
        blink: true
    };
    this.reset = function () {
        this.x = this.s.random ? WIDTH * Math.random() : this.s.xdef;
        this.y = this.s.random ? HEIGHT * Math.random() : this.s.ydef;
        this.r = (this.s.rmax - 1) * Math.random() + 1;
        this.dx = Math.random() * this.s.xmax * (Math.random() < .5 ? -1 : 1);
        this.dy = Math.random() * this.s.ymax * (Math.random() < .5 ? -1 : 1);
        this.hl = this.s.ttl / rint * (this.r / this.s.rmax);
        this.rt = Math.random() * this.hl;
        this.s.rt = Math.random() + 1;
        this.stop = Math.random() * .2 + .4;
        this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
        this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1)
    };
    this.fade = function () {
        this.rt += this.s.rt
    };
    this.draw = function () {
        if (this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt * -1;
        else if (this.rt >= this.hl) this.reset();
        var e = 1 - this.rt / this.hl;
        con.beginPath();
        con.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
        con.closePath();
        var t = this.r * e;
        g = con.createRadialGradient(this.x, this.y, 0, this.x, this.y, t <= 0 ? 1 : t);
        g.addColorStop(0, "rgba(255,255,255," + e + ")");
        g.addColorStop(this.stop, "rgba(77,101,181," + e * .6 + ")");
        g.addColorStop(1, "rgba(77,101,181,0)");
        con.fillStyle = g;
        con.fill()
    };
    this.move = function () {
        WIDTH =...