JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class='head-wrapper'>
    <div class='head' style='float: left; width: 100%; display: block; margin-top: 0px !important; margin-bottom: 0px; position: fixed; background-color: #000; color: #fff; line-height: 35px;height: 35px;'>
<a style='cursor: hand; cursor: pointer; display: inline-block;'>See 2011 Updates</a>
    </div>
</div>
<div class='title-div' style='z-index:0;display: block; margin: 0px; position: absolute; height: 74px; line-height: 74px; top: 41px; left: 0px;'>&nbsp;</div>
<div style='z-index:0;display: block; position: relative; width: 90%; padding-top: 80px; margin-right: auto; margin-left: auto;'>
    <div class="bubbleContainer" id="bubbleContainer1" style="position: absolute; top: 300px; left: 100px;">
        <div class="bubble1 big" style="background-image: url(images/1.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: 60% auto;">
            <h1>services</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula
                euismod elit, quis dignissim lectus aliquam a. Curabitur ut sagittis lorem.
                Vivamus vitae sapien vel nibh pellentesque varius. Integer ornare hendrerit
                justo sit amet fermentum. Sed rhoncus, lacus vel luctus semper, arcu metus
                ultrices felis, id convallis risus augue nec libero. Mauris ut velit aliquet
                quam condimentum placerat. Morbi elementum libero sollicitudin neque molestie
                semper. Ut hendrerit libero et ligula rutrum fermentum.</p>
        </div>
    </div>
</div>

CSS

body {
    margin: 0px auto;
}
html, body {
    height: 100%;
}
canvas {
    border: 0px solid #9C9898;
}
.canvas {
    z-index: -2;
    animation: myfirst 5s;
    -moz-animation: myfirst 5s;
    /* Firefox */
    -webkit-animation: myfirst 5s;
    /* Safari and Chrome */
    -o-animation: myfirst 5s;
    /* Opera */
    -webkit-transition: all 7s ease;
    -moz-transition: all 7s ease;
    -ms-transition: all 7s ease;
    -o-transition: all 7s ease;
    transition: all 7s ease;
}
@keyframes myfirst {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
@-moz-keyframes myfirst
/* Firefox */
 {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
@-webkit-keyframes myfirst
/* Safari and Chrome */
 {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
@-o-keyframes myfirst
/* Opera */
 {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
.colored-bg {
    margin:0px auto;
    height: 190px;
    width: 190px;
    -moz-border-radius: 300px;
    border-radius: 300px;
    background-color: #228c53;
    //transition: width .7s, height .7s, margin .7s;
    //-moz-transition: width .7s, height .7s, margin .7s, -moz-transform 7s;
    //-webkit-transition: width .7s, height .7s, margin .7s, -webkit-transform 7s;
    //-o-transition: width .7s, height .7s, margin .7s, -o-transform 7s;
}
div.colored-bg:hover {
    //height: 216px;
    //width: 216px;
    //margin: -13px auto;
    //-moz-border-radius: 108px;
    //border-radius: 108px;
    //transition: width .7s, height .7s, margin .7s;
    //-moz-transition: width .7s, height .7s, margin .7s;
    //-webkit-transition: width .7s, height .7s, margin .7s;
    //-o-transition: width .7s,...

JavaScript

// THIS ONE LOADS BUBBLES & HOVER EFFECTS




    // LOAD BUBBLES

    $('.bubble2').delay(400).animate({
        opacity: 1,
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        margin: '-75%'
    }, 400, function () {




        // NOW, LOAD HOVER EFFECTS

        $(".bubble2").delay(500).on('scale', function (e, s) {
            var data = $.data(this, 'size'),
                w = data.width,
                h = data.height;
            $(this).stop().animate({
                width: w * s,
                height: h * s,
                marginLeft: data.marginLeft - w * (s - 1) / 2,
                marginTop: data.marginTop - h * (s - 1) / 2
            });
        }).each(function () {
            var $this = $(this);
            $.data(this, 'size', {
                width: $this.width(),
                height: $this.height(),
                marginLeft: parseInt($this.css('margin-left')),
                marginTop: parseInt($this.css('margin-top'))
            });
        }).hover(function () {
            $(this).trigger('scale', [1.2])
        }, function () {
            $(this).trigger('scale', [1.0])

        });





    });



    // LOAD BUBBLE 1

    $('.bubble1').delay(200).animate({
        opacity: 1,
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        margin: '-75%'
    }, 400, function () {




        // NOW, LOAD HOVER EFFECTS FOR BUBBLE 1

        $(".bubble1").on('scale', function (e, s) {
            var data = $.data(this, 'size'),
                w = data.width,
                h = data.height;
            $(this).stop().animate({
                width: w * s,
                height: h * s,
                marginLeft: data.marginLeft - w * (s - 1) / 2,
                marginTop: data.marginTop - h * (s - 1) / 2
            });
        }).each(function () {
            var $this = $(this);
            $.data(this, 'size', {
                width: $this.width(),
               ...