JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">4</div>
</div>
<div class="box box2 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">7</div>
</div>
<div class="box box3 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">3</div>
</div>
<div class="box box4 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">5</div>
</div>
<div class="box box5 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">6</div>
</div>
<div class="box box6 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">2</div>
</div>
<div class="box box7 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">1</div>
</div>

CSS

html {
     margin:0;
     padding:0;
     height:100vh;
     background:#222;
     color: cornflowerblue;
     overflow-x:hidden;
     font-size:18px;
 }
 .box {
     height:100px;
     width:100px;
     background:rgba(0, 0, 0, 0.2);
     position:absolute;
     top:50%;
     left:50%;
     border-radius:50%;
     overflow:hidden;
     display:inline-block;
     transition:all 1.4s 1.4s;
 }
 .minibox {
     height:48%;
     width:48%;
     position:absolute;
     background:gray;
    transition:all 0.8s;
 }
 .box:hover .minibox {
     transform:rotate(45deg);
 }
 .mini1 {
     top:0;
     left:0;
 }
 .mini2 {
     top:0;
     right:0;
 }
 .mini3 {
     bottom:0;
     left:0;
 }
 .mini4 {
     bottom:0;
     right:0;
 }
 .circ {
     position:absolute;
     height:80%;
     width:80%;
     top:10%;
     left:10%;
     border-radius:50%;
     background:black;
     line-height:80px;
     text-align:center;
 }
 .box2 {
     top:38%;
     left:40%;
     transition:all 0.8s 2s;
 }
 .box3 {
     top:38%;
     left:60%;
     transition:all 0.8s 1.2s;
 }
 .box5 {
     top:38%;
     left:20%;
     transition:all 0.8s 1.8s;
 }
 .box4 {
     top:50%;
     left:30%;
     transition:all 0.8s 1.6s;
 }
 .box6 {
     top:25%;
     left:50%;
     transition:all 0.8s 1s;
 }
 .box7 {
     top:25%;
     left:30%;
 }
 .init {
     top:0;
     left:0;
     transition:all 0.5s
 }
 .init:before {
     content:"Menu";
     text-align:center;
     line-height:80px;
     background:red;
     position:absolute;
     z-index:8;
     height:80%;
     width:80%;
     border-radius:50%;
     top:10%;
     left:10%;
     background:blue;
 }
 .box:hover .minibox {
     background:red;
 }

JavaScript

$('.box').click(function () {
    $('.box').toggleClass("init");
});