JSFiddle - React, Tailwind, and code Playground

by Yuval Boss

HTML

<div class="all-interact">
<h1>Title</h1>

    <div class="inner-interact">
	    <ul class="tabs">
           <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
           <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
           <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">tab 3</a></li>
           <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4">tab 4</a></li>
           <li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_5">tab 5</a></li>
        </ul>


			<div class="tab-content" id="content_1">
				<p>tab 1 content</p>
			</div>

			<div class="tab-content" id="content_2">
				<p>tab 2 content</p>
			</div>

			<div class="tab-content" id="content_3">
				<p>tab 3 content</p>
			</div>

			<div class="tab-content" id="content_4">
				<p>tab 4 content</p>
			</div><!--content4-->

			<div class="tab-content" id="content_5">
				<p>tab 5 content</p>
			</div><!--content5-->

		</div>
	</div>

CSS

/* hide inactive tabs */
#content_2, #content_3, #content_4, #content_5 {
 display: none;
}

/* list styling */
ul.tabs li {
 list-style: none;
 display: inline-block;
}

/* inactive links */
ul.tabs li a {
 background-color: black;
 display: inline-block;
}

/* active links */
ul.tabs li a.active {
 background-color: pink;
 display: inline-block;
}

JavaScript

function tabSwitch(new_tab, new_content) {

document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById('content_5').style.display = 'none';
document.getElementById(new_content).style.display = 'block';

document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById('tab_5').className = '';
document.getElementById(new_tab).className = 'active';

}