JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="square">
    <div class="box">
        <div class="tab4">CLICK</div>
        
        <div class="tab1 tab"></div>
        <div class="tab2 tab"></div>
        <div class="tab3 tab"></div>
    </div>
</div>
</body>

CSS

.square{
    margin-left:100px;
}
.box{
    position:relative;
    width:150px;
    height:150px;
    background-color:transparent;
    color:#fff;
    text-align:center;
    
 }
.tab4{
   position:absolute;
    right:10px;
    top:50px;
        width:70px;
    height:40px;
    background-color:grey;
}
.tab{
    width:70px;
    height:40px;
    background-color:grey;
    display:none;
}
.tab1{
   position:absolute;
    right:-70px;
    top:50px;
}
.tab2{
   position:absolute;
    right:-70px;
    top:50px;
}

.tab3{
   position:absolute;
    right:-70px;
    top:50px;
}

JavaScript

$('.box').click(function(){
    var flag = $(this).data('flag');
    
    $('.tab1').toggle("slide", { direction: "left"}, 500);
    $('.tab2').toggle("slide", { direction: "left" }, 500);
    $('.tab3').toggle("slide", { direction: "left" }, 500);
    
    $('.tab1').animate({top: (flag ? '+=50px' : '-=50px')}); 
    $('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});    
    
    $(this).data('flag', !flag)
});