JSFiddle - React, Tailwind, and code Playground

HTML

<input id="search" type="text"></input>

<table>
    <tr class="guide">
        <td>First Name</td>
        <td>Last Name</td>
        <td>City</td>
        <td>State</td>
    </tr>
    <tr class="odd">
        <td>Manix</td>
        <td>Bolton</td>
        <td>Merizo</td>
        <td>Michigan</td>
    </tr>
    <tr class="even">
        <td>Azalia</td>
        <td>Gallegos</td>
        <td>Plainfield</td>
        <td>Michigan</td>
    </tr>
    <tr class="odd">
        <td>Michael</td>
        <td>Shaw</td>
        <td>Rawlins</td>
        <td>New Hampshire</td>
    </tr>
    <tr class="even">
        <td>Matthew</td>
        <td>Parker</td>
        <td>Chino Hills</td>
        <td>Michigan</td>
    </tr>
</table>

CSS

body {
    font-family: Arial, Helvetica;
    font-size: 12px;
}
table {
    width: 500px;
}
tr {
    height: 20px;
}
.guide {
    text-decoration: underline;
    text-align: center;
}
.odd {
    color: #fff;
    background: #666;
}
.even {
    color: #666;
}
.hot {
    border: 1px solid #f00;
}

JavaScript

$(document).ready(function() {
    $("input#search").keyup(function() {
        var self = $(this);
        $("tr:not(.guide) td").removeClass("hot").each(function(i, obj) {
            if($(obj).html().toLowerCase().indexOf(self.val().toLowerCase()) > -1 && self.val()) {
                $(obj).addClass("hot");
            }
        });
    });
});