JSFiddle - React, Tailwind, and code Playground

HTML

<div class="InnerRect"></div>
<div class="OutterRect"></div>
<div class="circle" id="top-left"></div>
<div class="circle" id="top-mid"></div>
<div class="circle" id="top-right"></div>
<div class="circle" id="mid-right"></div>
<div class="circle" id="bot-right"></div>
<div class="circle" id="bot-mid"></div>
<div class="circle" id="bot-left"></div>
<div class="circle" id="mid-left"></div>

CSS

.InnerRect {
    position:fixed;
    background: -moz-linear-gradient(top, rgba(255, 48, 25, 1) 0%, rgba(207, 4, 4, 1) 100%);
    /* FF3.6+ */
    width:100px;
    height:100px;
    margin:50px 0 100px 50px;
    border-radius: 20px 20px 20px 20px;
}
.OutterRect {
    position:fixed;
    background: -moz-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%);
    /* FF3.6+ */
    width:200px;
    height:200px;
    z-index:-1;
    border-radius: 10px 10px 10px 10px;
}
.circle {
    position:fixed;
    background: yellow;
    margin:90px 0 0 90px;
    width:20px;
    height:20px;
    border-radius:40px;
    z-index:1 transport: rotate(10deg);
    transition : all 2.5s;
}
#top-left {
    margin:90px 0 0 90px;
    transition-delay: 1.0s;
    z-index:2;
}
#top-mid {
    margin:90px 0 0 90px;
    transition-delay: 1.2s;
}
#top-right {
    margin:90px 0 0 90px;
    transition-delay: 1.4s;
}
#mid-right {
    margin:90px 0 0 90px;
    transition-delay: 1.6s;
}
#bot-right {
    margin:90px 0 0 90px;
    transition-delay: 1.8s;
}
#bot-mid {
    margin:90px 0 0 90px;
    transition-delay: 2.0s;
}
#bot-left {
    margin:90px 0 0 90px;
    transition-delay: 2.2s;
}
#mid-left {
    margin:90px 0 0 90px;
    transition-delay: 2.4s;
}

JavaScript

var interval4500;
var interval9000;
var count4500 = 0;
var count9000 = 0;

$(function () {
    $('#top-left').click(function () {
        $(this).css('margin', '0 0 0 0');
        $('#top-mid').css('margin', '0 90px 0 90px');
        $('#top-right').css('margin', '0 180px 0 180px');
        $('#mid-right').css('margin', '90px 0 0 180px');
        $('#bot-right').css('margin', '180px 0 0 180px');
        $('#bot-mid').css('margin', '180px 0 0 90px');
        $('#bot-left').css('margin', '180px 0 0 0');
        $('#mid-left').css('margin', '90px 0 0 0');
    });
    interval4500 = setInterval(countUp4500, 4500);
    interval9000 = setInterval(countUp9000, 9000);
});

function countUp4500() {
    count4500++;
    $('#top-left').css('margin', '45px 0 0 45px');
    $('#top-mid').css('margin', '45px 0 0 90px');
    $('#top-right').css('margin', '45px 0 0 135px');
    $('#mid-right').css('margin', '90px 0 0 135px');
    $('#bot-right').css('margin', '135px 0 0 135px');
    $('#bot-mid').css('margin', '135px 0 0 90px');
    $('#bot-left').css('margin', '135px 0 0 45px');
    $('#mid-left').css('margin', '90px 0 0 45px');

    if (count4500 == 4) {
        clearInterval(interval4500);
    }
}

function countUp9000() {
    count9000++;
    $('#top-left').css('margin', '180px 0 0 180px');
    $('#top-mid').css('margin', '180px 0 0 90px');
    $('#top-right').css('margin', '180px 0 0 0');
    $('#mid-right').css('margin', '90px 0 0 0');
    $('#bot-right').css('margin', '0 0 0 0');
    $('#bot-mid').css('margin', '0 90px 0 90px');
    $('#bot-left').css('margin', '0 180px 0 180px');
    $('#mid-left').css('margin', '90px 0 0 180px');

    if (count9000 == 4) {
        clearInterval(interval9000);
    }
}