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');
var tabsContainers = document.querySelectorAll('.tabs');

for (let i = 0; i < tabsContainers.length; i += 1) {
  tabsContainers[i].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');
      }
    }
  });
}