JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<button class="btn btn-1 btn-active">Tab 1</button>
<button class="btn btn-2">Tab 2</button>
<button class="btn btn-3">Tab 3</button>

<div class="content content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel dolor sagittis, volutpat ex in, ultrices leo. Sed efficitur vulputate sem, sed malesuada ligula placerat non. Aliquam nec commodo arcu. Phasellus tincidunt imperdiet vestibulum. Donec mollis tortor a purus venenatis facilisis. Suspendisse nisl mauris, consectetur ac risus vestibulum, convallis ornare nisl.</div>
<div class="content content-2">Mauris id libero nisl. Vestibulum placerat hendrerit maximus. Cras pulvinar metus a facilisis maximus. Donec volutpat velit eget leo condimentum, a efficitur mauris egestas. In a risus urna. Curabitur blandit, ipsum ac vulputate molestie, mi risus laoreet lectus, at suscipit ante tortor eget mauris.</div>
<div class="content content-3">Nulla in arcu et nisl bibendum porttitor. Pellentesque vel magna ipsum. Proin malesuada mauris a scelerisque maximus. Nullam sed accumsan arcu.</div>

CSS

.btn {
padding: 0.5em 0.75em;
border: none;
background-color: #e74c3c;
color: #fff;
font-size: 1.1em;
cursor: pointer;
outline: none;
}

.content {
font-family: arial;
display: none;
background-color: #333;
padding: 0.75em;
color: #fff;
}

.btn.btn-active {
background-color: #333;
}

.btn-1.btn-active ~ .content-1 {
display: block;
}
.btn-2.btn-active ~ .content-2 {
display: block;
}
.btn-3.btn-active ~ .content-3 {
display: block;
}

JavaScript

var btns = document.querySelectorAll(".btn");

Array.prototype.forEach.call(btns, function(e) {
	e.addEventListener("click", function() {
		Array.prototype.forEach.call(btns, function(e) {
			e.classList.remove("btn-active");
		});
		this.classList.add("btn-active");
	});
});