JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" id="moo">
    <div class="content">
        I am some content. Content rocks!
        <br />Click me to hide
    </div>
</div>

CSS

html, body {
    background:#333;
    height:100%;
    min-height:100%;
    font-family:sans-serif;
}
.cloud-bubble {
    position:absolute;
    width:10px;
    height:10px;
    background:#fff;
    border-radius:100%;
}

.container {
    position:absolute;
    background:#fff;
    left:-400px;
    top:60px;
    width:400px;
    height:150px;
}

.content {
    z-index:2;
    position:relative;
    padding:20px;
}

JavaScript

(function() {

// See README for options
$.fn.cloudSpawn = function(options) {

    // get out if we're spawned
    if(this.data('cloudSpawn')) {
        return this;
    }
    options = options || {};

    var topBubbles = [],
        bottomBubbles = [],
        $this = this,
        startWidth = $this.width(),
        startHeight = $this.height();

    // Option defaults
    var counter = startWidth,
        minDist = options.minDist || 30,
        maxDist = options.maxDist || 110,
        maxOverlap = options.maxOverlap || 15,
        minOverlap = options.minOverlap || 10,
        radius, started, circ;

    // inner util function
    var randInt = function(min, max) {
        return (Math.floor(Math.random() * (max - min + 1))) + min;
    };

    // Create a bubble
    var makeCircle = function(left, radius, bottom) {
        return {
            $elem: $('<div class="cloud-bubble' + (bottom ? ' cloud-bubble-bottom' : '') + '"></div>').css({
                left: left,
                top: bottom ? startHeight - radius : -radius,
                width: radius * 2,
                height: radius * 2
            }),
            radius: radius,
            left: left,
            curWidth: 0,

            // Move the bubble into place
            move: function(exposed) {
                var visible = (this.left + this.radius * 2) - (startWidth - exposed);
                this.$elem.css({
                    width: visible,
                    height: visible,
                    top: bottom ? startHeight - visible / 2 : -visible / 2,
                    left: this.left + (this.radius * 2 - visible)
                });

                // If fully visible, we're done. If fully invisible, we're
                // popped. Use a 0.1 margin of error
                this.done = visible - 0.1 >= this.radius * 2;
                this.popped = visible - 0.1 <= 0;
            }
        };
    };

    // build the top row of bubbles
    while (counter > 0) {
       ...