JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuMov">
        <div class="menu">
            <ul class="sf-menu">
                <li><a href="index1.html"><div class="mText">About us</div></a></li>
                <li><a href="index2.html"><div class="mText">Gallery</div></a></li>
                <li><a href="index3.html"><div class="mText">Training</div></a></li>
                <li class="last"><a href="index4.html"><div class="mText">Find us</div></a></li>
            </ul>
        </div>
    </div>

CSS

/*--- menu ------*/
    .menuMov {
    position: relative;
    width: 100%;
    height: 115px;
    margin: 0 auto;
    margin-top: 0;
    z-index: 10;
    }
    .menu {
    position: relative;
    z-index: 1;
    display: inline-block;
    text-transform: uppercase;
    }
    .sf-menu {
    z-index: 3;
    position: relative;
    display: inline-block;
    margin: 15px 0 0;
    }
    .sf-menu > li {
    position: relative;
    color: #383636;
    display: inline-block;
    float: left;
    height: 115px;
    margin-right: 35px;
    }
    .sf-menu .last {
    margin-right: 0;
    }
    .sf-menu > li > a {
    display: block;
    position: relative;
    height: 115px;
    overflow: hidden;
    padding: 0;
    }
    .sf-menu > li > a:hover {
    text-decoration: none;
    }
    .sf-menu > li.active > a {
    text-decoration: none;
    }
    .mText {
    font: 600 15px/15px 'Open Sans', sans-serif;
    font-style: italic;
    color: #545454;
    position: absolute;
    width: 100%;
    z-index: 1;
    text-align: center;
    left: 0;
    padding-top: 50px;
    }
    .mTextOver {
    font: 600 15px/15px 'Open Sans', sans-serif;
    font-style: italic;
    color: #000000;
    position: relative;
    width: 100%;
    z-index: 3;
    text-align: center;
    top: -100px;
    }
    ._area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 5;
    left: 0;
    display: block;
    }
    ._overPl {
    position: absolute;
    width: 100%;
    height: 84px;
    bottom: 100px;
    z-index: 2;
    left: 0;
    display: block;
    background: none;
    }
    ._overLine {
    position: absolute;
    width: 100%;
    height: 4px;
    top: 111px;
    z-index: 10;
    left: 0;
    display: block;
    background: #1b1b1b;
    opacity: 0;
    }
    /*--- menu end ------*/

JavaScript

$( "ul.sf-menu > li" ).each(function(){
    var conText = $(this).find('.mText').text();
    $(">a", this).append("<div class='_area'></div><div class='_overPl'></div><div class='_overLine'></div><div class='mTextOver'>"+conText+"</div>");
    });
    $("ul.sf-menu > li").mouseover(function() {
    $("li").removeClass('hoverItem');
    $(this).addClass('hoverItem');
    });
    //How to combine following functions?????????
    $( "ul.sf-menu > li" ).mouseover(function() {
    $(".mText").stop(true).animate({top:"160px"}, 600, 'easeOutCubic');
    $(".mTextOver").stop(true).delay(150).animate({top:"50px"}, 500, 'easeOutCubic');
    $("._overPl").stop(true).animate({bottom:"0px"}, 500, 'easeOutCubic');
    $("._overLine").stop(true).animate({opacity:1}, 500, 'easeOutCubic');
    });
    $( "ul.sf-menu > li" ).mouseout(function() {
    $(".mText").stop(true).animate({top:"0px"}, 600, 'easeOutCubic');
    $(".mTextOver").stop(true).delay(20).animate({top:"-100px"}, 400, 'easeOutCubic');
    $("._overPl").stop(true).animate({bottom:"100px"}, 400, 'easeOutCubic');
    $("._overLine").stop(true).animate({opacity:0}, 500, 'easeOutCubic');
    });