JSFiddle - React, Tailwind, and code Playground

HTML

<div id="al_stage" class="al_margin">
    <div class="al_container">
        <div id="target" class="al_scale">
            <div class="al_circle">
                <div class="al_wrapper">
                    <div class="al_center">Text</div>
                </div>
            </div>
            <div class="bubble_container">
                <div class="al_bubble al_md al_three">
                    <div class="al_scale">
                        <div class="al_circle">
                            <div class="al_wrapper">
                                <div class="al_center">Text</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="al_bubble al_md al_six">
                    <div class="al_scale">
                        <div class="al_circle">
                            <div class="al_wrapper">
                                <div class="al_center">Text</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="al_bubble al_md al_nine">
                    <div class="al_scale">
                        <div class="al_circle">
                            <div class="al_wrapper">
                                <div class="al_center">Text</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="al_bubble al_md al_twelve">
                    <div class="al_scale">
                        <div class="al_circle">
                            <div class="al_wrapper">
                                <div class="al_center">Text</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bubble_container deg30">
                <div class="al_bubble al_md al_three">
                    <div...

CSS

#al_stage {
    border:1px solid #000;
    width:650px;
    height:650px;
    position:relative;
    margin:20px auto;
}
.al_container {
    position:relative;
    padding:70px;
    box-sizing:border-box;
    width:255px;
    display:block;
    background:#5c76a3;
    border-radius:10px;
}
.al_scale {
    width:100%;
    padding-bottom:100%;
    position:relative;
    display:block;
}
.al_circle {
    z-index:2;
    border-radius:50%;
    background:gray;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.al_wrapper {
    display:table;
    width:100%;
    height:100%;
}
.al_center {
    height:100%;
    width:100%;
    vertical-align:middle;
    text-align:center;
    display:table-cell;
    position:relative;
}
.al_bubble {
    position:absolute;
    z-index:3;
    display:block;
    left:50%;
    right:50%;
    bottom:50%;
    top:50%;
    margin-right:0;
    margin-bottom:0;
    margin-top:0;
    margin-left:0;
}
.al_md {
    width:76%;
    height:76%;
    margin-left:-38%;
    margin-top:-38%;
    margin-right:initial;
    margin-bottom:initial;
}
.al_sm {
    width:60%;
    height:60%;
    margin-left:-30%;
    margin-top:-30%;
    margin-right:initial;
    margin-bottom:initial;
}
.active {
    -webkit-transition:left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
    transition:left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
}
.al_twelve.active {
    top:initial;
    bottom:100%;
    margin-top:0;
    margin-bottom:1%;
}
.al_six.active {
    top:100%;
    bottom:initial;
    margin-bottom:0;
    margin-top:1%;
}
.al_three.active {
    left:100%;
    right:initial;
    margin-left:1%;
    margin-right:0;
}
.al_nine.active {
    right:100%;
    left:initial;
    margin-right:1%;
    margin-left:0;
}
.bubble_container {
    width:100%;
    height:100%;
    position:absolute;
}
.deg30 {
   ...

JavaScript

$('#target').click(function () {
			    $('.al_bubble', this).toggleClass('active');
			});