JSFiddle - React, Tailwind, and code Playground

HTML

<!-- this simulates the menu rollover image -->
<div id="menuitem" style="position:absolute; background-color:#ff0000; top:0px; left:0px; width:200px; height:300px; text-align:left;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <br/>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<div id="menuitem2" style="position:absolute; background-color:#ff0000; top:0px; left:210px; width:200px; height:300px; text-align:left;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <br/>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<!-- this is the drawer -->
<div id="Container" class="menuContainer">
    <div id="menu" class="menuContent">
        <br/>
        <p>Func 1  / Func 2</p>
    <br/>
    </div>
</div>

<div id="Container2" class="menuContainer">
    <div id="menu2" class="menuContent">
        <br/>
        <p>Func 1  / Func 2</p>
    <br/>
    </div>
</div>

CSS

#menu { background-color:#96f39f; width:auto;}
.menuContainer    { position: absolute;display: inline; top: 0px; left:0px; width: 200px; height: 100px; z-index: 5000; overflow: hidden; }
.menuContent    { position: relative; display: none; }

JavaScript

$(document).ready(function() {
    $('#menuitem').hover(enter, leave);
        
    $ht = $('#menu').height();
    $('#menu').css({
        'top':'-'+$ht+'px',
        'opacity': 0,
        'display': 'block'
    });
    
    function enter(event) { // mouseenter IMG
        // removed image rollover code
    
        $('#menu').stop(true, false).animate({
            top: '0',
            opacity: 1
        },{
            duration: 300  // slow the opening of the drawer
        });
    };
    function leave(event) { // mouseout IMG
        // removed image rollover code
        
        $('#menu').delay(400).animate({
            top: '-'+$ht+'px',
            opacity: 0
        },{
            duration: 600
        });
    };
    
    $('#menu').hover(
        function (){ // mouseenter Menu drawer
            $(this).stop(true, false);
        },
        function (){ // mouseout Menu drawer
            $(this).delay(400).animate({
                top: '-'+$ht+'px',
                opacity: 0
            },{
                duration: 600    
            });
            
       }
   );
    
    
});