JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <button class='nav active' data-target='tab1'>button1</button>
   <button class='nav' data-target='tab2'>button 2</button>
</div>
<div>

<div class='block tab1 active'>
<p>
content 1
</p>
</div>

<div class='block tab2'>
<p>
content 2
</p>
</div>

</div>

CSS

.block {
  display:none;
}

.block.active {
  display:block;
}

.nav {
  display:inline-block;
}

JavaScript

let tab = function () {
    let tabNav = document.querySelectorAll('.nav'),
        tabContent = document.querySelectorAll('.block'),
        tabName;

    tabNav.forEach(item => {
        item.addEventListener('click', selectTabNav)
    });

    function selectTabNav() {
        tabNav.forEach(item => {
            item.classList.remove('active');
        });
        this.classList.add('active');
        tabName = this.getAttribute('data-target');
        selectTabContent(tabName);
    }

    function selectTabContent(tabName) {
        tabContent.forEach(item => {
            item.classList.contains(tabName) ? item.classList.add('active') : item.classList.remove('active');
        })
    }
};


tab();