JSFiddle - React, Tailwind, and code Playground

CSS

body {
    background-color: #82CAFF;
    font-size: larger;
    color: #FFF;
}
.wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
.content {
    width: 800px;
    height: 600px;
    text-align:center;
    margin: 0 auto;
    padding-top: 20px;
}

JavaScript

$(document).ready(function () {
    var counter = 0;
    //var colide = {};
    var px = 0;
    var py = 0;

    var clouds = new Array("cloud1", "cloud2", "cloud3", "cloud4", "cloud5", "cloud6");
    var cloudtext = new Array("This is text for cloud 1 :D", "This is text for cloud 2 :D", "This is text for cloud 3 :D", "This is text for cloud 4 :D", "This is text for cloud 5 :D", "This is text for cloud 6 :D");

    function makeDiv() {
        if (counter < 6) {
            counter++;

            //var divsize = ((Math.random() * 100) + 50).toFixed();
            //var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
            $newdiv = $('<div class="' + clouds[counter - 1] + '">' + cloudtext[counter - 1] + '<div/>').css({

                'width': '354px',
                    'height': '202px'

                //'width': divsize + 'px',
                //'height': divsize + 'px',
                //'background-color': color,
            });

            var posx = (Math.random() * ($(document).width() - 354)).toFixed();
            var posy = (Math.random() * ($(document).height() - 202)).toFixed();

            while (posy < 180) {
                posy = (Math.random() * ($(document).height() - 202)).toFixed();
            }


            if ((px > posx + 354) || (px < posx - 354)) {
                if ((py > posy + 202) || (py < posy - 202)) {


                    //alert(px + ' - ' + posx + ' px(temp) - posx(newdiv) - good to go!');
                    py = posy;
                    px = posx;
                    $newdiv.css({
                        'position': 'absolute',
                            'left': posx + 'px',
                            'top': posy + 'px',
                            'display': 'none',
                            'background-image': 'url(http://www.demixgaming.co.uk/cloud/images/Cloud.png)',
                            'text-align': 'center',
                            'line-height': '202px',
                ...