JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>54</td>
  </tr>
</table> 

<input id="search">

CSS

.highlight{
    color: red;
}

JavaScript

$('#search').keyup(function() {
    $(".highlight").removeClass("highlight");
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $('table tr').hide().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return ~text.indexOf(val);
    }).show().find("td").each(function(){
        
        var start = $(this).text().toLowerCase().indexOf(val);
        
        if(start !== -1){
            var end = val.length;
            
            var start_text = start != 0 ? $(this).text().substring(0,start) : "";
            var end_text = $(this).text().substring(start + end);
            var match = $(this).text().substring(start, start + end);
            
            $(this).html(start_text+'<span class="highlight">'+match+'</span>'+end_text);
        }
    });
});