JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <nav id="main-menu">
        <ul>
            <li><a class="men" rel="first-widget" href="">Homme</a></li>
            <li><a class="woman" rel="second-widget" href="">Femme</a></li>
            <li><a class="skate" rel="third-widget" href="">Skates</a></li>
            <li><a class="access" rel="fourth-widget" href="">Accessoires</a></li>
        </ul>
    </nav><!-- #main-menu !-->

    <div id="first-widget" class="widget-container">
                <p>Pull
                <a href="#">voir</a></p>
                 <p>T-shirt
                <a href="#">voir</a></p>
                 <p>Jeans
                <a href="#">voir</a></p>
                 <p>Chaussures
                <a href="#">voir</a></p>
     </div><!-- .first-widget !-->
    <div id="second-widget" class="widget-container">
                  <p>Pull
                <a href="#">voir</a></p>
                 <p>T-shirt
                <a href="#">voir</a></p>
                 <p>Jeans                
                <a href="#">voir</a></p>
                 <p>Chaussures
                <a href="#">voir</a></p>
    </div><!-- .second-widget !-->
    <div id="third-widget" class="widget-container">
     <p>Planches
                <a href="#">voir</a></p>
            
    </div><!-- .third-widget !-->
    <div id="fourth-widget" class="widget-container">
     <p>Divers
                <a href="#">voir</a></p>
               
    </div><!-- .fourth-widget !-->
</div>

CSS

#wrap {
    position: relative;
    top: 10px;
    left: 10px;
    border: 1px solid black;
}
#main-menu li {
    display: inline;
}
.widget-container {
    display: none;
}

JavaScript

$('#main-menu a').hover(function() {
    var $this = $(this);
    var id = $this.attr('rel');
    var $currentWidget = $('#' + id);
    var $currentClass = $this.attr('class');
    if(!$this.hasClass('foo')){
        $this.addClass('foo');
    }
    $('#main-menu a').not(this).removeClass('foo');
    $currentWidget.show()
       .siblings('.widget-container')
       .hide();
    console.log($currentClass);
});
$('#wrap').mouseleave(function() {
    $('.widget-container').hide();
    $('#main-menu ul li a').removeClass('foo');
});