JSFiddle - React, Tailwind, and code Playground

HTML

<font size="2">
    
<table id="stable">
<tr>
<th>
<center>
<label for="search"><strong>Enter keyword to search</strong></label>
<input type="text" id="search">
</th>
</tr>
</table>
<table id="table" class=".table-striped">
<thead>
<tr>
	<th>Name</th>
	<th>Email</th>
	<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
	<td>John Doe</td>
    <td>[email protected]</td>
	<td>$15000</td>
</tr>
<tr>
	<td>Jill Smith</td>
    <td>[email protected]</td>
	<td>$20000</td>
</tr>
<tr>
	<td>Eve Jackson</td>
    <td>[email protected]</td>
	<td>$20000</td>
</tr>
<tr>
	<td>John Doe</td>
    <td>[email protected]</td>
	<td>$15000</td>
</tr>
<tr>
	<td>John Doe</td>
    <td>[email protected]</td>
	<td>$15000</td>
</tr>
<tr>
	<td>Adam Johnson</td>
    <td>[email protected]</td>
	<td>$25000</td>
</tr>
<tr>
	<td>Peter Piper</td>
    <td>[email protected]</td>
	<td>$10000</td>
</tr>
    <tr>
	<td>John Doe</td>
    <td>[email protected]</td>
	<td>$15000</td>
</tr>
<tr>
	<td>Jill Smith</td>
    <td>[email protected]</td>
	<td>$20000</td>
</tr>
<tr>
	<td>Eve Jackson</td>
    <td>[email protected]</td>
	<td>$20000</td>
</tr>
<tr>
	<td>John Doe</td>
    <td>[email protected]</td>
	<td>$15000</td>
</tr>
<tr>
	<td>John Doe</td>
    <td>[email protected]</td>
	<td>$15000</td>
</tr>
<tr>
	<td>Adam Johnson</td>
    <td>[email protected]</td>
	<td>$25000</td>
</tr>
<tr>
	<td>Peter Piper</td>
    <td>[email protected]</td>
	<td>$10000</td>
</tr>
</tbody>
</table>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

CSS

#table {
    font-family:"Trebuchet MS", Georgia, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
}
#table td, #table th {
    font-size:1em;
    border:1px solid #005CE6;
    padding:3px 7px 2px 7px;
}
#table th {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#3399FF;
    color:#ffffff;
}
#table tr.alt td {
    color:#000000;
    background-color:#EBF5FF;
}
#table tr:nth-child(odd) > td, #table tr:nth-child(odd) > th {
    background-color: pink;
}
#stable {
    font-family:"Trebuchet MS", Georgia, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
}
#stable td, #stable th {
    font-size:1em;
    border:1px solid #005CE6;
    padding:3px 7px 2px 7px;
}
#stable th {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#3399FF;
    color:#ffffff;
}
#stable tr.alt td {
    color:#000000;
    background-color:#EBF5FF;
}
#stable tr:nth-child(odd) > td, #stable tr:nth-child(odd) > th {
    background-color: pink;
}

JavaScript

$(document).ready(function () {
    $('#search').keyup(function () {
        searchTable($(this).val());
    });
});

function searchTable(inputVal) {
    var table = $('#table');
    table.find('tr').each(function (index, row) {
        var allCells = $(row).find('td');
        if (allCells.length > 0) {
            var found = false;
            allCells.each(function (index, td) {
                var regExp = new RegExp(inputVal, 'i');
                if (regExp.test($(td).text())) {
                    found = true;
                    return false;
                }
            });
            if (found == true) $(row).show();
            else $(row).hide();
        }
    });
}