JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<nav class="tabs">
    <div data-tab="1" class="tabnav">zakladka 1</div>
    <div data-tab="2" class="tabnav">zakladka 2</div>
    <div data-tab="3" class="tabnav">zakladka 3</div>
</nav>
<div data-tab="1" class="tab">
    zakładka pierwsza
</div>
<div data-tab="2" class="tab">
    zakładka druga
</div>
<div data-tab="3" class="tab">
    zakładka trzecia
</div>
<br><br>
<nav class="tabs">
    <div data-tab="4" class="tabnav">zakladka 4</div>
    <div data-tab="5" class="tabnav">zakladka 5</div>
    <div data-tab="6" class="tabnav">zakladka 6</div>
</nav>
<div data-tab="4" class="tab">
    zakładka 4
</div>
<div data-tab="5" class="tab">
    zakładka 5
</div>
<div data-tab="6" class="tab">
    zakładka 6
</div>

CSS

nav
{
    float:left;
    width:300px;
    height:30px;
    clear:both;
    z-index:1;
    position:relative;
    text-align:center;
}

nav > div
{
    float:left;
    width:90px;
    height:inherit;
    border:1px solid black;
    text-decoration:none;
}
div.tab
{    
   position:relative; 
   top:1px;float:left;
   width:400px;
   height:200px;
   padding:10px;
   border: 1px solid black; 
   display:none;
}
div.tab.opened
{
  display: block;
}
nav div.active
{
    border-bottom:none; 
}

JavaScript

var tabnavs = document.querySelectorAll('.tabnav');
var tabs = document.querySelectorAll('.tab');
document.addEventListener('click', function (e) {
	e.preventDefault();
  for (let i = 0; i < tabnavs.length; i += 1) {
  	tabs[i].classList.remove('opened');
    tabnavs[i].classList.remove('active');
    if (e.target.dataset.tab === tabs[i].dataset.tab) {
    	tabs[i].classList.add('opened');
      tabnavs[i].classList.add('active');
    }
  }
});