JSFiddle - React, Tailwind, and code Playground

HTML

<div id="SBADashboardToggle">
			<label for="SBADashboardToggleSelect">Now viewing:</label>
			<!--[if !IE]> --&gt;
				<!--
				<div id="SBADashboardToggleSelectFancy">
					<span>Overview</span>
					<div class="ToggleWrapper">
						<div class="ToggleTrack"></div>
						<div class="ToggleHandle"></div>
					</div>
					<span>Punctuality</span>
				</div>
	<!-- <![endif]-->
				<select id="SBADashboardToggleSelect">
					<option selected="selected" value="GLChart">Overview</option>
					<option value="Punctuality">Punctuality</option>
				</select>
			
			<!-- http://jsfiddle.net/e4z20q9m/6/ -->
			<!-- http://jsfiddle.net/e4z20q9m/8/ the toggle before resizing to a smaller size -->
			<!-- http://jsfiddle.net/e4z20q9m/11/ after resizing and making cross browser and improving javascript code -->
			<!-- http://jsfiddle.net/coltos/3f8pfe11/ done -->
		</div>

<div id="GLChart">
			<div id="GLChart_Controls" class="GLChart_Controls">
					<div class="GLChart_controlGroup">
						<h2>Filter by Role</h2>
						<select id="GLChart_RoleSelect">
							<option selected="selected" value="all">All</option>
							<option value="command-BUMED">BUMED</option>
							<option value="command-BUPERS">BUPERS</option>
							<option value="command-CNIC">CNIC</option>
							<option value="command-DCMA">DCMA</option>
							<option value="command-DCPAS">DCPAS</option>
							<option value="command-DFAS">DFAS</option>
							<option value="command-DLA">DLA</option>
							<option value="command-DONAA">DONAA</option>
							<option value="command-DTS PMO">DTS PMO</option>
							<option value="command-FFC">FFC</option>
							<option value="command-FMB">FMB</option>
							<option value="command-FMO">FMO</option>
							<option value="command-FMO1">FMO1</option>
							<option value="command-FMO2">FMO2</option>
							<option value="command-FMO3">FMO3</option>
							<option value="command-FMO4">FMO4</option>
							<option value="command-FMO5">FMO5</option>
							<option...

CSS

.SummaryMetricsTable
{
	position:static !important;
	margin-right:0px;
	page-break-inside: avoid;
}
.SummaryMetricsTable table
{
	width:900px;
	page-break-inside: avoid;
}
.SummaryMetricsTable table td, .SummaryMetricsTable table th
{
	margin:0px; padding:3px;
}
.SummaryMetricsTable table tr.GrandTotal td, .SummaryMetricsTable table tr.GrandTotal th
{
	border-top:2px solid black;
}
#tabs > .tabZone
{
	margin:0px !important;
	padding:0px !important;
}
.SummaryMetricsTable .tableTitle
{
	margin-top:2.5em; /*to make room for the page header on subsequent pages. */
}
/* Header */
#s4-titlerow, .s4-title, .s4-title-inner, .s4-titletable, #s4-ribbonrow, #s4-leftpanel
{
	display:none !important; /*hides the normal header on the page */
}
#dataAsOfMessage { position:fixed; top:60px; left:0px; padding:0px; }

#Print_Header
{
	display:block !important;
	width:100%;
	text-align:center;
	font-size:1.3em;
	position:fixed; top:0px; left:0px; right:0px;
}
#Print_Header #fmoSeal, #Print_Header #navySeal
{
	height:60px; width:100px;
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	*zoom:1;
}
#Print_Header #fmoSeal
{
	float:left;
}
#Print_Header #navySeal
{
	float:right;
}
#Print_Header #fmoSeal img, #Print_Header #navySeal img
{	
	border:none;
	vertical-align:middle;
	display:inline-block;
	*zoom:1;
}

/*when I implement the drilldown on the metrics report I may want to not hide this anymore */
.drillDown
{
	display:none !important;
}

.noWrap
{
	white-space:nowrap;
}

#MSO_ContentTable
{
	margin:0px !important;
	margin-top:10px !important; /*to make room for the header on the first page */
}
#HelpDropDownWrapper
{
	display:none;
}
#footerDiv
{
	display:none;
}
#onetidPageTitleSeparator img[src$='images/fgimg.png'] /* Gets rid of the weird maximize and restore icons showing up in the body. */
{
	display:none;
}



/****** SBA Dashboard *****/
#GLChart>#GLChart_Controls
{
	margin-right:3em;
	margin-top:0px; /* margin-top:45px;  to account for the vertical space...

JavaScript

var Print_Header = '<div id="Print_Header" style="display:none;"><div id="mySeal"><img src="http://www.digimantra.com/blog/wp-content/uploads/2009/07/WindowsVista.small.logo.jpg" width=70px height=70px /></div><div id="navySeal"><img src="" /></div>Testing Testing 123</div>';

if ($("#Print_Header").length === 0) //don't want to insert it if it's already been inserted once.
	{
		$("#GLChart").before(Print_Header);
		//also want to insert the dataAsOf date/time

				toggleWrapper.empty();
				toggleWrapper.append('<div class="ToggleLabel ToggleLabelSelected">Overview</div><div class="ToggleHousing"><div class="ToggleTrack"></div><div class="ToggleHandle" data-position="0"></div></div><div class="ToggleLabel">Punctuality</div>');