JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lp-1">
    Passe o mouse aqui
</div>
<div id="lp-1-hover">
    div que abre
</div>

CSS

#lp-1 {
    display:block;
    float:left;
    width:100%;
    height: 100px;
    background-color:#FF0000;
}

#lp-1-hover {
    display: none;
    float:left;
    width:100%;
    height: 100px;
    background-color:#000000;
    color: #fff;
}

JavaScript

var timer1;
        $("#lp-1").on('mouseover', function(){
            clearTimeout(timer1);
            timer1 = setTimeout(function(){
                $("#lp-1-hover").stop().slideDown(400,'easeInCubic');
            }, 300);
    });