JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navi">
            <a href="#"><div id="t0"><span>Home</span></div></a>
            <a href="#"><span>Event1</span></a>
            <a href="#"><span>Event2</span></a>
            <a href="#"><span>Event3</span></a>
        </div>
        <div class="boxes event1">
            1
        </div>
        <div class="boxes event1">
            2
        </div>
        <div class="boxes event1">
            3
        </div>
        <div class="boxes event2">
            4
        </div>
        <div class="boxes event2">
            5
        </div>
        <div class="boxes event2">
            6
        </div>
        <div class="boxes event2">
            7
        </div>
        <div class="boxes event2">
            8
        </div>
        <div class="boxes event3">
            9
        </div>
        <div class="boxes event3">
            10
        </div>

CSS

.boxes, .event1, .event2, .event3 {
                background:rgba(0, 0, 0, .30);
                float:left;
                position:relative;
                overflow:hidden;
                width:100px;
                height:100px;
                margin:2px;
                box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
                -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
                -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
            }

            .w1{
                background:rgba(0, 0, 0, .30);
                float:left;
                width:100px;
                height:100px;
                position:absolute;
                overflow:hidden;
                margin: 2px;
                box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
                -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
                -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
                opacity: 1;
            }

JavaScript

var isHome = true;
            
            $(function () {
                
                $("#navi a").click(function() {
                    c = $(this).text().toLowerCase();
                    isHome = c=="home";
                    if (isHome){
                        $("*").animate({ 
                            opacity: 1.0
                        }, 500 );
                    } else {
                        $('.boxes').not('.' + c).animate({ 
                            opacity: 0.0
                        }, 500 );
                        $('.' + c).animate({ 
                            opacity: 1.0
                        }, 500 )
                    }
                });
            });
            
            function hoverIn(element){
                
                if(!isHome && $(this).css("opacity")==1){
                    $(".w1").each(function(i){
                        var oldDiv= $(this).data("oldDiv");
                        $(oldDiv).css({opacity:1});
                        $(this).remove(); 
                    });
                    var posX = $(this).position().left+2;
                    var posY = $(this).position().top+2;
                    var newDiv = $("<div>").html($(this).html());
                    $(newDiv).mouseleave(hoverOut);
                    $(newDiv).addClass("w1");
                    $("body").append(newDiv);
                    $(this).css({opacity: 0});
                    $(newDiv).offset({top:posY, left: posX});
                    $(newDiv).data("oldDiv",this);
                    $(newDiv).animate({height:"200px",width:"200px"},500)
                }
            }
            
            function hoverOut(element){

                 var oldDiv= $(this).data("oldDiv");
                 $(oldDiv).css({opacity:1});
                    
                 $(this).remove();
            }
            
            $(".boxes").mouseenter(hoverIn);