JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
                    <div class="wrap">
                        <div>
                            <div class="yellow">
                                <p>elephant</p>

                                <div class="pmadsmall">
                                    <p>bonus points area</p>
                                </div>

                                <div class="pmadbig">
                                    <p>pm ad big</p>
                                </div>
                            </div>

                            <div class="blue" style="float:righr;">
                                <p>tiger</p>
                            </div>
                        </div>

                        <div class="black">
                            <p>giraffe</p>
                        </div>

                        <div class="purple">
                            <p>monkey</p>
                        </div>

                        <div class="grey">
                            <p>snake</p>
                        </div>

                        <div class="green">
                            <p>bird</p>
                        </div>
                    </div>

                    <div class="cache">
                        <p>bonus points area</p>
                    </div><!-- END WRAPPER -->
                </div>

CSS

.box { color: #222 }
                .wrap {

                background: none repeat scroll 0 0 #FFFFFF;
                border: 0;


                width: 750px;
                margin-right:auto;
                margin-left:auto;
                height:400px;
                border-right:1px red solid;
                border-left:1px red solid;

                position:relative;
                }

                .wrap1 {

                background: none repeat scroll 0 0 #FFFFFF;
                border: 0;
                border-right:1px red solid;
                border-left:1px red solid;


                width: 750px;
                margin-right:auto;
                margin-left:auto;
                height:75px;

                position:relative;
                }

                .yellow{
                background-color:#ffdbac;
                float: left;
                font-size: 11px;

                position:absolute;
                width: 150px;
                height:150px;
                }
                .blue{
                background-color:#007fff;
                float: left;
                font-size: 11px;
                left:150px;
                position:absolute;
                top:150px;
                width: 150px;
                height:150px;
                }
                .purple{
                background-color:#4d2177;
                float: left;
                font-size: 11px;
                left:450px;
                position:absolute;
                width: 150px;
                height:150px;
                }
                .black{
                background-color:#000000;
                position:absolute;

                color:white;
                left:300px;
                   float: left;
                font-size: 11px;


                width: 150px;
                height:150px;
                }
                .grey{
                background-color:#acacac;
                float:right;
...

JavaScript

$(document).ready(function(){







                $('.yellow').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');

                $('.yellow').animate({
                width: '300',
                height: '400',
                top: '0'
                }, 250, function() {
                // Animation complete.
                });
                $('.pmadsmall').hide();
                $('.grey, .black').animate({
                left: '450'
                }, 250, function() {
                });

                $('.blue').animate({
                left: '300'
                }, 250, function() {
                });
                $('.purple, .green').animate({
                left: '600'
                }, 250, function() {

                $('.pmadbig').show();
                });



                });








                $('.blue').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');


                $('.blue').animate({
                width: '300',
                height: '375',
                top: '0'
                }, 250, function() {
                // Animation complete.
                });

                $('.grey, .black').animate({
                left: '450'
                }, 250, function() {

                });

                $('.purple, .green').animate({
                left: '600'
                }, 250, function() {
                $('.blue').append($('.cache'));
                $('.cache').slideDown();
                });


                });








                $('.purple').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');
               ...