JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<title>OSI Colors Export - July 29, 2013 2:46:15PM</title>
	<style>
	
	body, a, p, span, ul, ol, li, table, th, tr, td, div, h1, h2, h3, h4, h5, h6 {
		border: 0px;
		padding: 0px;
		margin: 0px;
		font-family: "Trebuchet MS", "Helvetica", Arial, sans-serif;
		font-size: 16px;
	}
	
	body {
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
		background: #d6d1b7;
	}
	
	h2 {
		font-size: 20px;
		text-align: center;
	}
	
	tr.osiAltBG:hover {
		background: #fffacd;
	}
	
	th {
		font-weight: bold;
		text-decoration: underline;
	}
	
	th:hover {
		background: #888;
	}
	
	th.osiHeadLeft {
		text-align: left;
	}
	
	th.osiHeadCenter {
		text-align: center;
	}
	
	td.osiTextLeft {
		text-align: left;
	}
	
	td.osiTextCenter {
		text-align: center;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
		margin-left: auto;
		margin-right: auto;
	}
	
	#header {
		width: 100%;
		color: #eee;
		background: #800;
		border: 2px #333 solid;
		padding 5px;
	}
	
	#content {
		padding: 5px;
	}
	
	#footer {
		width: 100%;
		padding: 5px;
		color: #eee;
		background: #800;
		border: 2px #333 solid;
	}
	
	p {
		text-align: center;
	}
	
	div#progress {
		background: #0f0;
	}
	
	</style>
<script language="javscript" type="text/javascript">

//Change this variable to match the "id" attribute of the
//table that is going to be operated on.
var tableID = "sortable";

/**
 * Attach click events to all the <th> elements in a table to 
 * call the tableSort() function. This function assumes that cells  
 * in the first row in a table are <th> headers tags and that cells
 * in the remaining rows are <td> data tags.
 *
 * @param table The table element to work with.
 * @return void
...