JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset>
<legend>Item 1</legend>
<div class="tab" data-tab="001">Formato 1</div>
<div class="tab" data-tab="002">Formato 2</div>
<div class="tab" data-tab="003">Formato 3</div>
<div class="tab" data-tab="004">Formato 4</div>
<div class="tab" data-tab="005">Formato 5</div>
<div class="atb" data-tab="006">Formato 6</div>
<div class="content hide" data-tab="001">Conteudo oculto 1</div>
<div class="content hide" data-tab="002">Conteudo oculto 2</div>
<div class="content hide" data-tab="003">Conteudo oculto 3</div>
<div class="content hide" data-tab="004">Conteudo oculto 4</div>
<div class="content hide" data-tab="005">Conteudo oculto 5</div>
<div class="content hide" data-tab="006">Conteudo oculto 6</div>
</fieldset>
<fieldset>
<legend>Item 2</legend>
<div class="tab" data-tab="001">Formato 1</div>
<div class="tab" data-tab="002">Formato 2</div>
<div class="tab" data-tab="003">Formato 3</div>
<div class="tab" data-tab="004">Formato 4</div>
<div class="tab" data-tab="005">Formato 5</div>
<div class="atb" data-tab="006">Formato 6</div>
<div class="content hide" data-tab="001">Conteudo oculto 1</div>
<div class="content hide" data-tab="002">Conteudo oculto 2</div>
<div class="content hide" data-tab="003">Conteudo oculto 3</div>
<div class="content hide" data-tab="004">Conteudo oculto 4</div>
<div class="content hide" data-tab="005">Conteudo oculto 5</div>
<div class="content hide" data-tab="006">Conteudo oculto 6</div>
</fieldset>
<fieldset>
<legend>Item 3</legend>
<div class="tab" data-tab="001">Formato 1</div>
<div class="tab" data-tab="002">Formato 2</div>
<div class="tab" data-tab="003">Formato 3</div>
<div class="tab" data-tab="004">Formato 4</div>
<div class="tab" data-tab="005">Formato 5</div>
<div class="atb" data-tab="006">Formato 6</div>
<div class="content hide" data-tab="001">Conteudo oculto 1</div>
<div...
CSS
.focus {
color: blue;
}
.hide {
display: none;
}
JavaScript
var todasTabs = document.getElementsByClassName('tab');
function onTabClick () {
var tab = this;
var tabs = tab.parentNode.getElementsByClassName('tab');
var contents = tab.parentNode.getElementsByClassName('content');
for (var i = 0; i < tabs.length; i++) {
if (tab.dataset.tab == tabs[i].dataset.tab) {
tabs[i].classList.add('focus');
} else {
tabs[i].classList.remove('focus');
}
}
for (var i = 0; i < contents.length; i++) {
if (tab.dataset.tab == contents[i].dataset.tab) {
contents[i].classList.remove('hide');
} else {
contents[i].classList.add('hide');
}
}
};
for (var i = 0; i < todasTabs.length; i++) {
todasTabs[i].onclick = onTabClick;
}