JSFiddle - React, Tailwind, and code Playground

HTML

<a class="textMessagesLink" href="#">Message A</a>
<a class="textMessagesLink" href="#">Message B</a>
<a class="textMessagesLink" href="#">Message C</a>

<div id="textMessages">
    <div id="defaultMessage">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    <div id="MessageA">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    <div id="MessageB">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    <div id="MessageC">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
</div>

CSS

#textMessages, #textMessages div{
}

JavaScript

$(function(){
    var slideOut = null;
    $('#textMessages').slideUp(1000);
    $('#textMessages,.textMessagesLink').hover(function(){
        $("#textMessages").slideDown(1000);
        if (slideOut != null) {
            clearTimeout(slideOut);
            slideOut = null
        }
    },function(){
        slideOut = setTimeout(HideHide,1000);
    });
    function HideHide(){
        $('#textMessages').slideUp(1000);
    }
});