JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="links">
    <li class="linkA"><a><span>Hover here to see BOX A</span></a></li>
    <li class="linkB"><a><span>Hover me to see BOX B</span></a></li>
</ul>

<div id="boxA">
 Some content here for Box A
</div>

<div id="boxB">
 Content for Box B
</div>

CSS

ul,li {
    list-type:none; 
    display:inline;
    border: 1px solid #ddd;
}

#boxA, #boxB {
    width:300px;
    height:180px;
    border:4px solid #00aaff;
    background:yellow; 
    display: none;
}

JavaScript

$(".linkA, .linkB").on('hover', function(e) {
    if(e.type == 'mouseenter') {
      $("#box" + this.className.replace('link','')).fadeIn('slow');
    } else {
      $("#box" + this.className.replace('link', '')).fadeOut('slow');
    }
});