JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="box">
    <div class="part p1"></div>
    <div class="part p2"></div>
    <div class="part p3"></div>
    <div class="part p4"></div>
</div>

CSS

#box {
    margin: 2em auto;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}

div.part {
    position: absolute;
    width: 50px;
    height: 50px;
    background: silver;
}
.p1 {
    top: 0;
    left: 0;
}

.p2 {
    top: 0;
    right: 0;
}

.p3 {
    bottom: 0;
    left: 0;
}

.p4 {
    bottom: 0;
    right: 0;
}

JavaScript

$(function() {
    
    $('#box').click(function() {

        var $box = $(this);

        $('div.part', $box).each(function(i, part) {

            $box.queue('fade', function(next) {
                
                  $(part).fadeOut(250, next);                    
            });
                

        });

        $box.dequeue('fade');            

    });        
    
});