JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search" placeholder="Type to search">
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

CSS

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

JavaScript

var $cells = $('#table td');
$('#search').keyup(function() {
    var input = $(this).val();
    var val = '^(?=.*\\b' + $.trim(input).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;
    
    $cells.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        console.log(input);
        //return !reg.test(text);
        if(!reg.test(text) || input == ''){
        	$(this).css('color','black');
        } else {
            $(this).css('color','green');
        }
    });
});