JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <td colspan="2">
                <label for="searchbox">Search:</label>
                <input type="text" id="searchbox" />
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Something</td>
            <td>More text</td>
        </tr>
        <tr>
            <td>Lorem ipsum</td>
            <td>blah?</td>
        </tr>
    </tbody>
</table>

CSS

td {
    border: 1px solid #000;
    padding: 0.4em 1em;
    background-color: #fff;
}

td.searchResult {
    background-color: #ffa;
}
td.faded {
    opacity: 0.2;
}

JavaScript

$(document).ready(
    function(){
        $('#searchbox').keyup(
            function(){
                var searchText = $(this).val();
                
                if (searchText.length > 0) {
                    $('tbody td:contains('+searchText+')')
                        .addClass('searchResult');
                    $('.searchResult')
                        .not(':contains('+searchText+')')
                        .removeClass('searchResult');
                    
                    $('tbody td')
                        .not(':contains('+searchText+')')
                        .addClass('faded');
                    $('.faded:contains('+searchText+')')
                        .removeClass('faded');
                    
                    $('.faded').hide();
                    $('.searchResult').show();
                    
                }
                else if (searchText.length == 0) {
                    $('.searchResult').removeClass('searchResult');
                    $('.faded').removeClass('faded');  
                    $('td').show();
                }
            });
    });