JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
	<div class="body">
		<div class="b15"></div>
		<div class="b16"></div>
		<div class="b17"></div>
		<div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div><div class="b20"></div>
		<div class="b21"></div>
		<div class="b22"></div>
		<div class="b23"></div>
		<div class="b24"></div>
		<div class="b25"></div>
		<div class="b26"></div>
		<div class="b27"></div>
		<div class="b28"></div>
		<div class="b29"></div>
		<div class="b30"></div>
		<div class="b31"></div>
		<div class="b32"></div>
		<div class="b33"></div>
		<div class="b34"></div>
		<div class="b35"></div>
		<div class="b36"></div>
		<div class="b37"></div>
		<div class="b38"></div>
		<div class="b39"></div>
		<div class="b40"></div>
		<div class="b41"></div>
		<div class="b42"></div>
		<div class="b43"></div>
		<div class="b44"></div>
		<div class="b45"></div>
		<div class="b46"></div>
		<div class="b47"></div>
		<div class="b48"></div>
		<div class="b49"></div>
		<div class="b50"></div>
	</div>
</figure>

CSS

html { height: 100%; }
body {
	height: 100%;
	margin: 0;
	background: linear-gradient(#77bbfb, #2266a5);
}
figure {
	display: block;
	position: relative;
	width: 400px; height: 400px;
	margin: auto;
	padding-top: 50px;
}
figure div {
	position: absolute;
}
.body div {
	border-radius: 50%;
	border: 3px solid #000;
	background: radial-gradient(circle at center, rgba(255,255,255,0.9) 24%, #000 26%, #000 46%, #40c1fd 47%, #1394cf);
}
.b1   {
	width: 48px;
	height: 48px;
	left: 131px;
	top: 14px;
}
.b2 {
	width: 40px;
	height: 40px;
	left: 196px;
	top: 3px;
}
.body .b3   {
	width: 17px;
	height: 17px;
	left: 372px;
	top: 59px;
	border-width: 1px;
}
.b4   {
	width: 50px;
	height: 50px;
	left: 285px;
	top: 251px;
}
.body .b5   {
	width: 10px;
	height: 10px;
	left: 229px;
	top: 390px;
	border-width: 1px;
}
.b6   {
	width: 55px;
	height: 55px;
	left: 288px;
	top: 54px;
}
.b7   {
	width: 31px;
	height: 31px;
	left: 53px;
	top: 76px;
}
.b8   {
	width: 37px;
	height: 37px;
	left: 94px;
	top: 26px;
}
.b9   {
	width: 50px;
	height: 50px;
	left: 60px;

}
.b13 {
	width: 44px;
	height: 44px;
	left: 173px;
	top: 14px;
}
.b14 {
	width: 50px;
	height: 50px;
	left: 115px;
	top: 40px;
}
.b15 {
	width: 39px;
	height: 39px;
	left: 186px;
	top: 82px;
}
.body .b16 {
	width: 16px;
	height: 16px;
	left: 243px;
	top: 287px;
	border-width: 1px;
}
.b17 {
	width: 36px;
	height: 36px;
	left: 62px;
	top: 152px;
}
.b18 {
	width: 38px;
	height: 38px;
	left: 48px;
	top: 168px;
}
.b19 {
	width: 50px;
	height: 50px;
	left: 80px;
	top: 170px;
}
.b20 {
	width: 55px;
	height: 55px;
	left: 117px;
	top: 168px;
}
.b21 {
	width: 50px;
	height: 50px;
	left: 151px;
	top: 160px;
}
.b22 {
	width: 55px;
	height: 55px;
	left: 255px;
	top: 18px;
}
.b23 {
	width: 54px;
	height: 54px;
	left: 353px;
	top: 220px;
}
.b24 {
	width: 41px;
	height: 41px;
	left: 342px;
	top: 137px;
}
.body .b25 {
	width: 18px;
	height: 18px;
	left: 323px;
	top: 42px;
	border-width: 1px;
}
.b26 {
	width: 15px;
	height: 15px;
	left:...