JSFiddle - React, Tailwind, and code Playground

HTML

<li><a class="menuItem" href="#" data-for="div1">PRODUCTGROEPEN</a> </li>
<li><a class="menuItem" href="#" data-for="div2">PRODUCTGROEPEN</a></li>
<li><a class="menuItem" href="#" data-for="div3">PRODUCTGROEPEN</a></li>

<div class="dropdown div1">asdfasdfasdfasdfasdfasdfDIV1</div>
<div class="dropdown div2">asdfasdfasdfasdfasdfasdfDIV2</div>
<div class="dropdown div3">asdfasdfasdfasdfasdfasdfDIV3</div>

CSS

.dropdown {
display: none;
}

.dropdown.active {
    display: block;
}

JavaScript

$('.menuItem').on('mouseover', function(){
    var forWhat = $('body').find('.'+$(this).attr('data-for'));
    forWhat.addClass('active');
});

$('.menuItem').on('mouseout', function(){
    var forWhat = $('body').find('.'+$(this).attr('data-for'));
    forWhat.removeClass('active');
});