JSFiddle - React, Tailwind, and code Playground

by hamidrezabstn

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

$(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'); 
        
        for (var i=0 ; i<4 ; i++){ 
       setTimeout(function() {
        $('#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');            
    }, 4500);  
        
        setTimeout(function() {
        $('#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');             
    }, 9000);
        
    };
       
            
    });
});