JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
	HERE IS THE HEADER
</div>
<ul id="menu">
	<div id="menuborders1">
	<div id="menuborders2">
		<li class="current"><a href="#" data-id="div1">FIRST CONTENT</a></li>
		<li><a href="#" data-id="div2">SECOND CONTENT</a></li>
		<li><a href="#" data-id="div3">THIRD CONTENT</a></li>
	</div>
	</div>
</ul>
<div id="content">
	<div class="subcontent" id="div1">
		FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT FIRST CONTENT 
	</div>
	<div class="subcontent" id="div2">
		SECOND CONTENT SECOND CONTENT SECOND CONTENT SECOND CONTENT SECOND CONTENT SECOND CONTENT SECOND CONTENT...

CSS

#header{
	width: 100%;
	height: 150px;
	font-size: 38px;
	background-color: #b9b9b9;
	text-align: center;
}
#footer{
	width: 100%;
	height: 150px;
	font-size: 38px;
	background-color: #b9b9b9;
	text-align: center;
}

JavaScript

$(document).ready(function () {
    $('.subcontent:gt(0)').hide();
    $('#menu').on('click', 'li:not(.current) a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.subcontent:visible').hide(600);
        // fade in new selected subcontent
        $('.subcontent[id=' + $(this).attr('data-id') + ']').show(600);
    });
});