JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<div id="over-box">
    <p class="randomness-info"><span class='brightness' style='font-weight: 100'>Randomness</span></p></div>
<div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300|Roboto:400,300,100,500|Dancing+Script:400,700);
 .point {
    width: 2px;
    height: 2px;
    background-color: DarkGray;
    border-radius: 75px;
    margin: 20px;
    display: inline-block;
}
#wrapper {
    width: 1000px;
    margin: auto;
}
body {
    background-color: rgba(230, 230, 230, 1);
    text-align: center;
    min-width: 800px;
    margin: 0;
    padding: 0;
}
#over-box {
    bottom: 0;
    height: 400px;
    width: 800px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 15px;
}
.randomness-info {
    font-family:'Roboto', Helvetica, Arial, Sans-Serif;
    font-size: 72pt;
    font-weight: 100;
    color: rgba(20, 20, 20, 1);
}

JavaScript

$('.point').each(function () {
    var $this = $(this);
    var myVar = setInterval(function () {
        $this.css('opacity', Math.round(Math.random()));
        $('.brightness').css({
            '-webkit-filter': 'blur(' + (Math.random() * 3) + 'px)'
        });
    }, 30);
});