JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="one">
        <div>
            <h4>title</h4>
            <p>description</p>
        </div>
    </li>
</ul>

CSS

#one div { display: none;}

#one{
     min-height:20px;
     min-width:200px;
     background-color: #ccc;  
}

JavaScript

$(document).ready(function() {

    $('#one').hover(function() {
        //$('#one > div').css({ display : 'block' });
        $('#one > div').slideDown(333)
    });
    
    $('#one').mouseleave(function() {
        //$('#one > div').css({ display : 'block' });
        $('#one > div').slideUp(333)
    });

});