JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
	<meta name="viewport" content="width = device-width, initial-scale = 1">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta charset="utf-8">
	
	<title>Escalator/Elevator Status</title>
	
	<link rel="stylesheet" type="text/css" href="/Content/ExpoTable.css">
	<link rel="stylesheet" type="text/css" href="/Content/MillenniumTable.css">
	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
	<link rel="stylesheet" href="/Content/ui-grid.min.css" />
	
	<script src="/Scripts/jquery-3.2.1.min.js"></script>
	<script src="/Scripts/moment.js"></script>
	<script src="/Scripts/jQuery-Migrate-3.0.0.js"></script>
	<script src="/Scripts/jquery.mobile-1.4.5.min.js"></script>
	<script src="/Scripts/jquery.mobile-1.4.5.js"></script>
	<script src="/Scripts/jquery-ui-1.12.1.min.js"></script>
	<script src="/Scripts/angular.js"></script>
	<script src="/Scripts/angular-touch.js"></script>
	<script src="/Scripts/angular-animate.js"></script>
	<script src="/Scripts/ui-grid.js"></script>
	<script src="/Scripts/ElevatingDevicesStatus.js"></script>
	<script src="/Scripts/ElevatingDevicesHistory.js"></script>
	
</head>

<body class="SkyPage">
	<!--<h1>Elevator-Escalator Status</h1>-->
	<div data-role="page" id="main-page">
		<div data-role="header" id="display-resources">
			<span style="color:navy;font-size:13pt;width:100%;text-align:center">Elevator-Escalator Status</span>
		</div>
		<div role="main" class="ui-content">
			<div id="Expo">
				<table id="ExpoStatusLine" class="expoTable" border="1" style="width:100%;border:solid">
					<tbody>
						<tr style="height:16px;">
							<td style="text-align:left; width:15%; font-size:13pt;" id="ExpoLineID"><span id="ExpoTitle">Expo Line</span></td>
							<td width="65%"><div class="expoScroll" id="ExpoLastEvent"></div></td>
							<td style="text-align:right; font-size:13pt;" width="20%" id="ExpoLastUpdate"><span...