Tabs System with HTML, Tailwind CSS and Vanilla JS

index.html

<div class="atw-tabs">
		<div class="atw-tabs-labels">
				<button class="tab-btn active" data-tab="tab1">Tab 1</button>
         <button class="tab-btn" data-tab="tab2">Tab 2</button>
         <button class="tab-btn" data-tab="tab3">Tab 3</button>
		</div>
		<div class="tab-content">
			<div class="tab-pane active" data-tab="tab1">
				<h3 class="text-xl">Tab 1</h3>
         			<p>Lorem ipsum dolor sit amet</p>
			</div>
			<div class="tab-pane" data-tab="tab2">
				<h3 class="text-xl">Tab 2</h3>
         			<p>Lorem ipsum dolor sit amet</p>
			</div>
			<div class="tab-pane" data-tab="tab3">
				<h3 class="text-xl">Tab 3</h3>
         			<p>Lorem ipsum dolor sit amet</p>
			</div>
		</div>
</div>

post-css.css

.atw-tabs {
	@apply flex flex-col font-sans;

	.atw-tabs-labels {
		@apply flex;

		.tab-btn {
			@apply mr-1 border-t-2 py-2 px-4;

			&.active {
				@apply border-t-2 border-secondary;
			}
		}
	}

	.tab-content {
		@apply border-t;

		.tab-pane {
			@apply hidden px-2 py-8 text-sm;

			h2,
			h3,
			h4 {
				@apply my-4 font-bold text-secondary;
			}

			h2 {
				@apply text-2xl;
			}
			h3 {
				@apply text-xl;
			}
			h3 {
				@apply text-lg;
			}

			ul {
				li {
					@apply list-inside list-disc;
				}
			}

			p {
				@apply mb-4;
			}
			&.active {
				@apply block;
			}
		}
	}
}

script.js

const tabButtons = document.querySelectorAll(".tab-btn");
const tabPanes = document.querySelectorAll(".tab-pane");

for (let i = 0; i < tabButtons.length; i++) {
		tabButtons[i].addEventListener("click", function () {

      // rimuove la classe "active" dai bottoni delle tab
			document.querySelector(".tab-btn.active").classList.remove("active");
			
      // aggiunge la classe "active" al bottone della tab corrente
			this.classList.add("active");
      
			// nasconde tutti i contenuti delle tab
			for (let j = 0; j < tabPanes.length; j++) {
				tabPanes[j].classList.remove("active");
			}
      
			// mostra il contenuto della tab corrente
			const tab = this.getAttribute("data-tab");
			document
				.querySelector(`.tab-pane[data-tab="${tab}"]`)
				.classList.add("active");
		});
}