JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/christianbach/tablesorter/master/jquery.tablesorter.js"></script>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

CSS

table.tablesorter {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	width: 100%;
	text-align: left;
	
	word-wrap: break-word;
	table-layout: fixed;
	margin-top: 5px;
}
table.tablesorter thead tr .header {
    border-right: 1px solid #333;
    position: relative;
}
.tablesorter th {
	font-weight: bold;
	padding: 10px 18px;
	color: #fff;
	background: #666;
	vertical-align: middle;
	text-align: left;
    letter-spacing: .07em;
    cursor: pointer;
}

JavaScript

$("#myTable").tablesorter();