JSFiddle - React, Tailwind, and code Playground

HTML

<div id="secondary-menu">
  <ul>
    <li data-tab="tab1">button 1</li>
    <li data-tab="tab2">button 2</li>
    <li data-tab="tab3">button 3</li>
    <li data-tab="tab4">button 4</li>
    <li data-tab="tab5">button 5</li>
  </ul>
</div>

<div id="tab1" class='dropdown-content'>
  <h5>Heading One</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab2" class='dropdown-content'>
  <h5>Heading Two</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab3" class='dropdown-content'>
  <h5>Heading Three</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab4" class='dropdown-content'>
  <h5>Heading Four</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab5" class='dropdown-content'>
  <h5>Heading Five</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

CSS

.dropdown-content {
  display: none;
}

JavaScript

$('#secondary-menu li').mouseenter(function(){ 
	$('#' + $(this).data('tab')).slideDown();
}).mouseleave(function(){
  $('#' + $(this).data('tab')).slideUp();
});