JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="header">

	<h2>OSI Colors Export</h2>
	<p>Created for user: jwalker on July 29, 2013 2:46:15PM</p>
	
</div>

<progress id="progressBar" max="100" value="0"></progress>

<div id="content">
	<div style="margin-left: auto; margin-right: auto; width: 500px;">
		<div id="progress" style="width: 0px;"><p id="progressText"> </p></div>
	</div>
</div>
	
<div class="osiTableBrowse">
	<div class="osiContent">
		<table id="sortable">
			<thead>
			<tr>
				<th class="osiHeadLeft" style="width: 220px;">Color</th>
				<th class="osiHeadLeft" style="width: 160px;">Manufacturer</th>
				<th class="osiHeadLeft" style="width: 100px;">Reference</th>
				<th class="osiHeadCenter" style="width: 90px;">Match</th>
				<th class="osiHeadCenter" style="width: 90px;">Must Coat</th>
				<th class="osiHeadCenter" style="width: 80px;">LRV</th>
			</tr>
			</thead>
			<tbody>
			<tr class="osiAltBG">
				<td class="osiTextLeft">Acadia Blue</td>
				<td class="osiTextLeft">Sherwin-Williams</td>
				<td class="osiTextLeft">S/W 3011</td>
				<td class="osiTextCenter"><span style="color: #6a5acd;" title="Sealant must be ordered from Woolf">000</span></td>
				<td class="osiTextCenter"><span style="color: #6a5acd;" title="Sealant must be ordered from Woolf">000</span></td>
				<td class="osiTextCenter">0</td>
			</tr>

			<tr class="osiAltBG">
				<td class="osiTextLeft">Accessible Beige</td>
				<td class="osiTextLeft">Sherwin-Williams</td>
				<td class="osiTextLeft">S/W 7036</td>
				<td class="osiTextCenter"><span title="Sealant is stocked locally by CSI">425</span></td>
				<td class="osiTextCenter"><span style="color: #6a5acd;" title="Sealant must be ordered from Woolf">000</span></td>
				<td class="osiTextCenter">0</td>
			</tr>

			<tr class="osiAltBG">
				<td class="osiTextLeft">Adaptive Shade</td>
				<td class="osiTextLeft">Sherwin-Williams</td>
				<td class="osiTextLeft">S/W 7053</td>
				<td class="osiTextCenter"><span title="Sealant is stocked locally by...

CSS

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;
}

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
 */
function initHeaders(table) {
	//Get the table element
	table = document.getElementById(table);
	//Get the number of cells in the header row
	var l = table.rows[0].cells.length;
	//Loop through the header cells and attach the events
	for(var i = 0; i < l; i++) {
		if(table.rows[0].cells[i].addEventListener) { //For modern browsers
			table.rows[0].cells[i].addEventListener("click", tableSort, false);
		} else if(table.rows[0].cells[i].attachEvent) { //IE specific method
			table.rows[0].cells[i].attachEvent("onclick", tableSort);
		}
	}
}

/**
 * Compares values in a column of a table and then sorts the table rows.
 * Subsequent calls to this function will toggle a row between ascending
 * and descending sort directions.
 *
 * @param e The click event passed in from the browser.
 * @return mixed No return value if operation completes successfully, FALSE on error.
 */
function tableSort(e) {	
    var progress = document.getElementById('progressBar');
    progress.value = "0";
    
	/**
	 * Checks to see if a value is numeric.
	 *
	 * @param n The incoming value to check.
	 * @return bool TRUE if value is numeric, FALSE otherwise.
	 */
	tableSort.isNumeric = function (n) {
		var num = false;
		if(!isNaN(n) && isFinite(n)) {
			num = true;
		}
		return num;
	};
	
	//Get the element from the click event that was passed.
	if(e.currentTarget) { //For modern browsers
		e = e.currentTarget;
	} else if(window.event.srcElement) { //IE specific method
		e = window.event.srcElement;
	} else {
		console.log("Unable to determine source...