JSFiddle - React, Tailwind, and code Playground

HTML

<input id="filter-field" placeholder="Search" type="text" />

    <table cellspacing="0" cellpadding="0" >
        <thead>
            <tr>
                <th>Pet</th>
                <th>Colour</th>
            </tr>
        </thead>
        <tbody>
        	<tr>    
        		<td>cat</td>
                <td>white</td>
    	    </tr>
        	<tr>
        		<td>dog</td>
                <td>black</td>
        	</tr>
        	<tr>
        		<td>parrot</td>
                <td>yellow</td>
        	</tr>
        	<tr>
        		<td>fish</td>
                <td>yellow</td>
        	</tr>
        	<tr>
        		<td>hamster</td>
                <td>black</td>
        	</tr>
        </tbody>
    </table>

CSS

table, td {
    border:solid 1px #ccc;
}
th {
    background-color:#eaeaea;
}

JavaScript

$("#filter-field").on('input', function() {
 
			// Split the current value of searchInput
			var data = this.value.split(" "),
				inputLength = $("#filter-field").val().length;

			// Create a jquery object of the rows
			var jo = $("table > tbody").find("tr");

			if (this.value == "") {
				jo.show();
				return;
			}

			// Hide all the rows
			jo.hide();

			jo.filter(function() {
				var textField = $.trim($('#filter-field').val()).split(" ");
                    var theSearch = textField.join("|");
                    return (this.textContent || this.innerText).match(theSearch);

			}).show();
});