JSFiddle - React, Tailwind, and code Playground

by emturano

HTML

<div id="canvas">
			<div id="gf_top">
			<div style="width: 160px; margin-right: auto; margin-left: auto">
				<a href="../add" title="Add Job"><div id="add_items" class="opac"></div></a>
					<div id="spacer">•</div>
				<a href="../tracking" title="Job Directory"><div id="directory_items" class="opac"></div></a>
					<div id="spacer">•</div>
			</div>
		</div>
		<div id="hb_container">
			<div class="tab-link current" data-tab="tab-1"><div class="tab-link-inner">Job<br>Info</div></div>
			<div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">Asb.<br>By</div></div>
			<div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">App.<br>No.</div></div>
			<div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">App.<br>Info</div></div>
			<div class="tab-link" data-tab="tab-5"><div class="tab-link-inner">Arch.<br>Info</div></div>
			<div class="tab-link" data-tab="tab-6"><div class="tab-link-inner">Att.<br>Upload</div></div>
			<div class="tab-link" data-tab="tab-7"><div class="tab-link-inner">Bldg.<br>Mgmt.</div></div>
			<div class="tab-link" data-tab="tab-8"><div class="tab-link-inner">Bldg.<br>Owner</div></div>
			<div class="tab-link" data-tab="tab-9"><div class="tab-link-inner">Client<br>Info</div></div>
			<div class="tab-link" data-tab="tab-10"><div class="tab-link-inner">Chks.<br>Req.</div></div>
			<div class="tab-link" data-tab="tab-11"><div class="tab-link-inner">Gen.<br>Cntr.</div></div>
			<div class="tab-link" data-tab="tab-12"><div class="tab-link-inner">Mech.<br>Eng.</div></div>
			<div class="tab-link" data-tab="tab-13"><div class="tab-link-inner">Proj.<br>C/L</div></div>
			<div class="tab-link" data-tab="tab-14"><div class="tab-link-inner">Proj.<br>Scope</div></div>
			<div class="tab-link" data-tab="tab-15"><div class="tab-link-inner">Rmrks.<br>Upd.</div></div>
			<div class="tab-link" data-tab="tab-16" style="margin-right: 0"><div class="tab-link-inner">Struc.<br>Eng.</div></div>
		</div>
		<div...

CSS

div {
	overflow: visible;
}

/*Fade controls*/
.opac, .opac:hover, .tab-link, .tab-link: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 {
	overflow: hidden;
	padding: 0;
	text-align: center;
}

div.post {
	padding: 0 8px 0 8px;
}

#field_container {
	background-color: #2d2d2d !important;
	border: solid 1px #4f4f70;
}

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

.frm_top_container {
	overflow: visible;
}

#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;
		color: #ddd;
		cursor: pointer;
		float: left;
		font-family: Roboto;
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 14px;
		margin: 0 8px 0 0;
		width: 54px !important;
		height: 54px;
	}

		.tab-link:hover {
			background: #181818;
			color: #ffcc00;
		}

		.tab-link-inner {
			margin-top: 11px;
		}

p {
	display: block;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end:...