JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_holder">
    <div class="menuItem" id="menu_item_1">
         <h5>Home</h5>

        <p>Shows this page</p>
    </div>
  
</div>

CSS

* {
    margin: 0 auto;
    padding: 0;
}
#menu_holder {
    position: absolute;
    width: 410px;
    height: 410px;
    margin: 0;
    padding: 105px;
    top: calc(50% - 305px);
    left: calc(50% - 305px);
}
.menuItem {
    padding-top: 45px;
    width: 200px;
    height: 155px;
    float: left;
}
#menu_item_1 {
    margin: 0px 5px 5px 0px;
    background-color: rgb(139, 157, 195);
    color: rgb(255, 255, 255);
}
#menu_item_2 {
    margin: 0px 0px 5px 5px;
    background-color: rgb(183, 239, 161);
}
#menu_item_3 {
    margin: 5px 5px 0px 0px;
    background-color: rgb(175, 182, 88);
}
#menu_item_4 {
    margin: 5px 0px 0px 5px;
    background-color: rgb(88, 73, 56);
}
.menuItem h5 {
    font-size: 50px;
    font-family: Lato;
    text-align: center;
}
.menuItem p {
    color: red;
    background: black;
    font-size: 18px;
    font-family: Lato;
    text-align: center;
    display: none;
}

JavaScript

$(document).ready(function () {
    var that = this;
    $('#menu_item_1').hover(function () {
        
        $(this).filter(':not(:animated)').animate({
            width: "300px",
            height: "255px",
            marginBottom: "-100px",
            marginRight: "-100px"
        });

        $(this).find('p').fadeIn();

    }, function () {
        $(this).animate({
            width: "200px",
            height: "155px",
            marginTop: "0",
            marginLeft: "0"
        });
        $(that).find('p').fadeOut();
    });

});