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 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...

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; }
.al_md { width:76%; height:76%; }
.al_sm { width:60%; height:60%; }


.al_three.al_md, .al_six.al_md { 
	top:50%;
	left:50%;
	margin-top:-38%; 
	margin-left:-38%; 
}
.al_three.al_sm, .al_six.al_sm { 
	top:50%;
	left:50%;
	margin-top:-30%; 
	margin-left:-30%; 
}

.al_twelve.al_md, .al_nine.al_md { 
	bottom:50%; 
	right:50%;
	margin-bottom:-38%; 
	margin-right:-38%; 
}
.al_twelve.al_sm, .al_nine.al_sm { 
	bottom:50%; 
	right:50%;
	margin-bottom:-30%; 
	margin-right:-30%; 
}

.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 { bottom:100%; margin-bottom: 5px; }
.al_six.active { top:100%; margin-top:5px; }
.al_three.active { left:100%; margin-left:5px; }
.al_nine.active { right:100%; margin-right:5px; }

.bubble_container {
	width:100%; height:100%; position:absolute; 
}
.deg30 {
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}
.deg30 .al_scale { 
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
}
.deg60...

JavaScript

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