JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="tab" rel="tab1">Tab1</a>
<a href="#" class="tab" rel="tab2">Tab1</a>
<div class="container"></div>

<div id="tab1" style="display: none">lorem ipsum dolor</div>
<div id="tab2" style="display: none">sit amet consequetur elit</div>

CSS

* 
{ 
    font: normal 12px calibri 
}
.container 
{
    background: red;
    display: none;
    height: 150px;
    width: 150px;
}

a.tab 
{ 
    background: blue; 
    color: #fff; 
    display: inline-block; 
    padding: 2px 4px 
}

JavaScript

var containerOpen = false;
var containerTimeout;
$('a.tab').hover(
    function(){
        clearTimeout(containerTimeout);
        $('.container')
            .stop()
            .hide()
            .css("height", "150px")
            .html($("#" + $(this).attr("rel")).text()).slideDown();
    },function() {
            containerTimeout = setTimeout(function() { 
                if(!containerOpen) $('.container').stop().slideUp(); 
            }, 200);
});

$(".container").hover(
    function() {
       containerOpen = true;
    },
    function() {
       $('.container').stop().slideUp(); 
       containerOpen = false;
});