JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div class="mybox box">
        <div style="position: absolute;">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
        </div>
    </div>

    <div class="buttons">
        <div class="mybutton">
            /* Button image here */
        </div>
    </div>
</div>

<div id='container2'>
    <div class="mybox2 box">
        <div style="position: absolute;">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
        </div>
    </div>

    <div class="buttons">
        <div class="mybutton2">
            /* Button image here */
        </div>
    </div>
</div>

CSS

.mybox div{
    border: solid 1px silver;
    padding: 5px; 
    background-color: grey;
    color: white;
    
}

.mybox2 div{
    border: solid 1px silver;
    padding: 5px; 
    background-color: grey;
    color: white;    
}

.box{
    display: none;
}

JavaScript

$(document).ready(function() {
    $("#container").hover(
        function() {
            console.log($(".mybox").fadeIn());
            $(".mybox").fadeIn();

        },
        function() {
            $(".mybox").fadeOut();
        }
    );

    $("#container2").hover(
        function() {
            $(".mybox2").fadeIn();

        },
        function() {
            $(".mybox2").fadeOut();
        }
    );
});