JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="frmField_set">
	<legend>Components</legend>
	<div id="divSGComponents">
		<ul class="tabs">
			<li class="tab-link current" data-tab="divTabLearningAreas">Learning Areas</li>
			<li class="tab-link" data-tab="divTabAttendance">Attendance</li>
			<li class="tab-link" data-tab="divTabExtraCurricular">Extra Curricular</li>
			<li class="tab-link" data-tab="divTabCharacter">Character</li>
			<li class="tab-link" data-tab="divTabNarrative">Narrative</li>
		</ul>
		<div id="divTabLearningAreas" class="tab-content current">
			1
		</div>
		<div id="divTabAttendance" class="tab-content">
			2
		</div>
		<div id="divTabExtraCurricular" class="tab-content">
			3
		</div>
		<div id="divTabCharacter" class="tab-content">
			4
		</div>
		<div id="divTabNarrative" class="tab-content">
			5
		</div>
	</div>
</fieldset>

CSS

ul.tabs{
		margin: 0px;
		padding: 0px;
		list-style: none;
        width: 100%;
        float: left;
	}
	ul.tabs li{
		background: #ffffff;
		color: #222;
		display: inline-block;
		padding: 10px 15px;
		cursor: pointer;
		border-top-right-radius: 1em;
		border-top-left-radius: 1em;
		border: 1px solid #afafaf;
		margin : 0px;
        float: left;
	}
	ul.tabs li.current{
		background: #afafaf;
		color: #222;
	}
	.tab-content{
		display: none;
		padding: 10px;
	}
	.tab-content.current{
		display: inherit;
	}

JavaScript

$(document).ready(function () {
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	});
});