JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hb_container">
			<div class="tab-link current" data-tab="tab-1">JI<div class="tab-link-hover"><div class="tab-link-hover-margin">Job<br>Information</div></div></div>
			<div class="tab-link" data-tab="tab-2">AB<div class="tab-link-hover"><div class="tab-link-hover-margin">Asbestos<br>By</div></div></div>
			<div class="tab-link" data-tab="tab-3">AN<div class="tab-link-hover"><div class="tab-link-hover-margin">Application<br>Numbers</div></div></div>
			<div class="tab-link" data-tab="tab-4">AP<div class="tab-link-hover"><div class="tab-link-hover-margin">Appointment<br>Information</div></div></div>
			<div class="tab-link" data-tab="tab-5">AR<div class="tab-link-hover"><div class="tab-link-hover-margin">Architect<br>Information</div></div></div>
			<div class="tab-link" data-tab="tab-6">AT<div class="tab-link-hover"><div class="tab-link-hover-margin">Attachment<br>Upload</div></div></div>
			<div class="tab-link" data-tab="tab-7">BM<div class="tab-link-hover"><div class="tab-link-hover-margin">Building<br>Management</div></div></div>
			<div class="tab-link" data-tab="tab-8">BO<div class="tab-link-hover"><div class="tab-link-hover-margin">Building<br>Owner</div></div></div>
			<div class="tab-link" data-tab="tab-9">CL<div class="tab-link-hover"><div class="tab-link-hover-margin">Client<br>Information</div></div></div>
			<div class="tab-link" data-tab="tab-10">CR<div class="tab-link-hover"><div class="tab-link-hover-margin">Checks<br>Required</div></div></div>
			<div class="tab-link" data-tab="tab-11">GC<div class="tab-link-hover"><div class="tab-link-hover-margin">General<br>Contractor</div></div></div>
			<div class="tab-link" data-tab="tab-12">ME<div class="tab-link-hover"><div class="tab-link-hover-margin">Mechanical<br>Engineer</div></div></div>
			<div class="tab-link" data-tab="tab-13">PC<div class="tab-link-hover"><div class="tab-link-hover-margin">Project<br>Checklist</div></div></div>
			<div class="tab-link" data-tab="tab-14">PS<div...

CSS

#hb_container{
    width:100px;
    overflow: hidden;
}

/*Fade controls*/
.opac, .opac:hover, .tab-link, .tab-link:hover, .tab-link-hover, .tab-link-hover:hover {
	transition: all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	-webkit-transform: translateZ(0);
}
/*End fade controls*/

#canvas {
	padding: 0;
	text-align: center;
}

.frm_forms.with_frm_style {
	max-width: 992px !important;
}

#gf-dct-name {
    margin-bottom: 29px;
    margin-top: 28px;
}

#gf_top {
	background: #282828;
	color: #49442d;
	font-family: 'Roboto';
	font-size: 21px;
	height: 46px;
	line-height: 46px;
	margin-bottom: 0px !important;
}

	#gf_top #add_items {
		background: url("../../images/add_items.png") center no-repeat;
		background-size: 40px 40px;
		float: left;
		width: 40px;
		height: 46px;
	}

	#gf_top #directory_items {
		background: url("../../images/directory_items.png") center no-repeat;
		background-size: 40px 40px;
		float: left;
		width: 40px;
		height: 46px;
	}

	#gf_top .opac {
		opacity: .5;
	}

		#gf_top .opac:hover {
			opacity: 1;
		}

	#gf_top #spacer {
		float: left;
		padding-top: 2px;
		width: 40px;
	}

#hb_container {
	margin: 8px 0 8px 8px;
	width: 984px;
	height: 54px;
}
	.tab-content {
		display: none;
	}

	.tab-content.current {
		display: inherit;
	}

	.tab-link {
		background: #222;
		cursor: pointer;
		float: left;
		font-family: LeagueGothicRegular;
		font-size: 27px;
		letter-spacing: 2px;
		line-height: 54px;
		margin: 0 8px 0 0;
		overflow: visible !important;
		width: 54px !important;
		height: 54px;
	}

		.tab-link-hover {
			background-color: rgba(20, 20, 20, 0.95);
			color: #ffcc00;
			font-family: Roboto;
			font-size: 12px;
			line-height: 14px;
			margin-top: -54px;
			opacity: 0;
			position: absolute;
			text-align: center;
			width: 116px;
			height: 54px;
		}

			.tab-link:hover .tab-link-hover {
				opacity: 1;
			}

			.tab-link-hover-margin...