JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div id="test1" class="test">
      test
      </div>
        <div id="test2" class="test">
            test
        </div>
        <div id="test3" class="test">
            test
        </div>
        <div id="test4" class="test">
            test
        </div>
    </div>

CSS

.container {
        width:599px; background-color:#000;padding:0px;  height:336px; overflow-y:hidden;
    }
    
    .test {
        width:246px; background-color:#039; left:9px; top:0px; position:relative; height:84px;
    }

JavaScript

$(document).ready(function(){

$("#test1").mouseover(function(){
  $(this).animate( { width:"599px",left:"0px", height:"168px" }, 100 );
});
$("#test1").mouseleave(function(){
  $(this).clearQueue().animate( { width:"246px",left:"9px", height:"84px" }, 100 );
});

$("#test2").mouseover(function(){
   $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-21px" }, 100 )
  $(".test").animate( { top:"-21px" }, 100 );
});
$("#test2").mouseleave(function(){   
  $(this).clearQueue().animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
     $(".test").clearQueue().animate( { top:"0px" }, 100 );
})

$("#test3").mouseover(function(){ 
 $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-63px" }, 100 )
 $(".test").animate( { top:"-63px" }, 100 );
});
$("#test3").mouseleave(function(){ 
  $(this).clearQueue().animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
  $(".test").clearQueue().animate( { top:"0px" }, 100 );
})

$("#test4").mouseover(function(){
 $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-84px" }, 100 )
 $(".test").animate( { top:"-84px" }, 100 );
});
$("#test4").mouseleave(function(){
  $(".test").clearQueue().animate( { top:"0px" }, 100 );
  $(this).clearQueue().animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 );
});
    
    $(".container").mouseleave(function(){ 
      $("#test1").clearQueue().animate( { width:"246px",left:"9px", height:"84px" }, 100 );
      $(".test").clearQueue().animate( { top:"0px" }, 100 );    
    });
    

});