JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab">tab 1</div>
 <div class="tab">tab 2</div>
 <div class="tab">tab 3</div>
 <div class="tab">tab 4</div>

 <div class="menu">menu 1</div>
 <div class="menu">menu 2</div>
 <div class="menu">menu 3</div>
 <div class="menu">menu 4</div>

CSS

.tab {
    display:none;
}

JavaScript

var menus = document.getElementsByClassName('menu');
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < menus.length; i++)  {
    menus[i].index = i;
    tabs[i].isShown = false;
    menus[i].onclick = function() {
        if (!tabs[this.index].isShown) {
            tabs[this.index].style.display = 'block';
            tabs[this.index].isShown = true;
        }
        else {
            tabs[this.index].style.display = 'none';
            tabs[this.index].isShown = false;
        }
        
    }
}