JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
		<li>
			<a class="link" href="#">tab 1</a>
			<p class="para">(1) Lorem ipsum dolor sit amet, consectetur</p>
		</li>
		<li>
			<a class="link" href="#">tab 2</a>
			<p class="para">(2) adipisicing elit. Dignissimos sit, pariatur, aspernatur</p>
		</li>
		<li>
			<a class="link" href="#">tab 3</a>
			<p class="para">(3) magni similique praesentium suscipit commodi cumque ipsam possimus</p>
		</li>
		<li>
			<a class="link" href="#">tab 4</a>
			<p class="para">(4) facere odit ratione tempora porro odio voluptatibus veniam</p>
		</li>
		<li>
			<a class="link" href="#">tab 5</a>
			<p class="para">(5) dolorem rem, ducimus eveniet voluptatum in nostrum rerum</p>
		</li>
	</ul>

CSS

.nav {
	list-style: none;
	position: relative;
}

.nav li {
	display: inline-block;
	/* margin-right: 20px; */
}

.nav li a {
	display: block;
	padding: 5px 15px;
	border: 2px solid black;
	background-color: #eee;
}

.nav li p {
	position: absolute;
	left: 0;
	margin-top: -2px;
	width: 500px;
	border: 2px solid black;
}

.hide {
	display: none;
}

JavaScript

var para = document.getElementsByClassName("para");
for(var j = 0; j < para.length; j++) {
	var par = para[j];
	par.classList.add("hide");
	para[0].classList.remove("hide");
}

var links = document.getElementsByClassName("link");

for(var i = 0; i < links.length; i++) {
	var link = links[i];
	link.addEventListener("click", function() {
		for(var k = 0; k < para.length; k++) {
			var par = para[k];
			par.classList.add("hide");
		}
		this.nextElementSibling.classList.remove("hide");
	}, false);
}