JSFiddle - React, Tailwind, and code Playground

HTML

<div id="liveFilter">
	<div class="liveFilterContainer">
		<input type="text" class="liveFilterInput default" value= "Live Filter 1" />
		<a href="#" class="clearField" title="Clear Filter">x</a>
        <input type="text" class="liveFilterInput default" value= "Live Filter 2" />
		<a href="#" class="clearField" title="Clear Filter">x</a>
        <input type="text" class="liveFilterInput default" value= "Live Filter 3" />
		<a href="#" class="clearField" title="Clear Filter">x</a> 
	</div>
	<div class="noResults"><strong>Sorry.</strong> There is no match for your filter; please try again.</div>
	<table class="liveFilterList" border="0">
		<tbody>
			<tr>
				<th>Filename</th>
				<th>Type</th>
				<th>Date</th>
			</tr>
			<tr>
				<td>The Hitch Hiker's Guide to the Galaxy</td>
				<td>Book</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>The Hitch Hiker's Guide to the Galaxy</td>
				<td>Film</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>Dirk Gently's Holistic Detective Agency</td>
				<td>TV Series</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>The Hitch Hiker's Guide to the Galaxy</td>
				<td>Audio Book</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>The Hitch Hiker's Guide to the Galaxy</td>
				<td>Soundtrack</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>The Restaurant at the End of the Universe</td>
				<td>Book</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>Life, The Universe and Everything</td>
				<td>Book</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>So Long, and Thanks For All The Fish</td>
				<td>Book</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>Mostly Harmless</td>
				<td>Book</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>The Original Radio Scripts</td>
				<td>Book</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>The Hitch Hiker's Guide to the Galaxy</td>
				<td>Adventure Game</td>
				<td>28/01/2011</td>
			</tr>
			<tr>
				<td>Dirk Gently's Holistic Detective...

CSS

#liveFilter {
	width: 600px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background: #fff;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
#liveFilter .liveFilterContainer {
	border: solid 1px #ccc;
	padding: 6px;
	background: #f5f5f5;
}
#liveFilter .liveFilterContainer .liveFilterInput {
	border: solid 1px #ccc;
	padding: 4px 30px 4px 4px;
	font-size: 16px;
	color: #666;

}
#liveFilter .liveFilterContainer .liveFilterInput.default {
	color: #ccc;
	font-style: italic;
 
}
#liveFilter .liveFilterContainer .clearField {
	background: #80bce8;
	width: 16px;
	padding: 0 6px 3px 6px;
	color: #fff;
	text-decoration: none;
	line-height: 0;
	font-weight: bold;
}
#liveFilter .liveFilterList {
	width: 600px;
	border: solid 1px #ccc;
	border-top: 0;
}
#liveFilter .liveFilterList tr th:first-child,
#liveFilter .liveFilterList tr td:first-child {
	padding-left: 5px;	
}
#liveFilter .liveFilterList tr th {
	text-align: left;
	padding: 3px 0;
}
#liveFilter .liveFilterList tr td {
	border-top: solid 1px #eee;
	padding: 3px 0;
	color: #333;
}
#liveFilter .clearField {
	display: none;
}
#liveFilter .noResults {
	display: none;
	padding: 10px;
	color: #fff;
	background: #982929;
	margin: 2px;
}

JavaScript

jQuery(document).ready(function(e) {
	
	var columnsToIndex = [1,2,3]; // first column is 1
	
	initLiveFilter(columnsToIndex);
});

// Live Filter
function initLiveFilter(columnsToIndex) {

	var liveFilter = jQuery("#liveFilter");
	
	if (liveFilter.length > 0) {
		
		var	liveFilterField 	= liveFilter.find("input.liveFilterInput"),
			liveFilterGrid		= liveFilter.find("table.liveFilterList"),
			liveFilterGridRows 	= liveFilterGrid.find("tr:gt(0)"), // gt(0) prevents the first row (normally a TH) from being included.
			liveFilterClear 	= liveFilter.find(".clearField"),
			liveFilterNoResults = liveFilterGrid.prev(),
			liveFilterDataArray = new Array(),
		
	//Create an array and populate it with key codes that should not cause shake effects
	
			characterValidationArray = [8,45,46], //backspace, insert, delete
		
	//Create an array and populate it with key codes that don't trigger an action
		
			characterExclusionArray = [13,20,27,33,34,37,39,35,36,16,17,18,144,145]; // enter, caps, esc, page up, page down, left, right, home, end, shift, ctrl, alt, num lock, scroll lock
		
	// Create the datasources we'll use to index the content
	
		if (columnsToIndex.length > 1) {
			
			for (col=0; col<=columnsToIndex.length-1; col++)
			{
	
				liveFilterGridRows.children("td:nth-child(" + columnsToIndex[col] + ")").each(function(i){
				
					liveFilterDataArray[liveFilterDataArray.length++] = jQuery(this).text();
				
				});
			}
			
		} else {
			
			liveFilterGridRows.children("td:first-child").each(function(i){
				
				liveFilterDataArray[i] = jQuery(this).text();
				
			});
		}
	
	// When a key is pressed in the designated input field - do the following:
	
		liveFilterField.on("keyup",function(key){
			
		// Check the character that was pressed and ensure it doesn't exist in the exclusion array defined above
	
			if (jQuery.inArray(key.keyCode,characterExclusionArray) == -1) {
			
				var	liveFilterValue = liveFilterField.val();
	
				if...