JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="quickSearch" placeholder="Введите первые буквы"/>
<table>
  <thead>
    <th>Заголовок</th>
  </thead>
  <tr>
    <td>Jill</td>
    <td>50</td>
  </tr>
   <tr>
    <td>John</td>
    <td>30</td>
  </tr>
   <tr>
    <td>Dany</td>
    <td>55</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Aron</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Linda</td>
    <td>94</td>
  </tr>
</table>
<table>
  <thead>
    <th>Заголовок 2</th>
  </thead>
   <tr>
    <td>Sample</td>
    <td>30</td>
  </tr>
   <tr>
    <td>Third</td>
    <td>55</td>
  </tr>
  <tr>
    <td>Five</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Firs</td>
    <td>94</td>
  </tr>
</table>

CSS

#quickSearch{
  padding: 1em;
}
table, #quickSearch{
  width:100%;
}

JavaScript

//FILTER/SEARCH TABLE
var input = document.getElementById("quickSearch");
if (input) {
    input.addEventListener('keyup', filteringTable);
}
function filteringTable() {
    var td, i,
        filter = input.value.toUpperCase(),
        table = document.querySelectorAll("table"),
        arr = [0, 0];


    for (i = 0; i < table.length; i++) {
        for (var a = 0; a < table[i].rows.length; a++) {
          var tr = table[i].rows[a];
          td = tr.getElementsByTagName("td")[0] || tr.getElementsByTagName("th")[0];
          if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                  tr.style.display = "";
              } else {
                  if (td.tagName !== 'TH') {
                    arr[i]++;
                    tr.style.display = "none";
                  }
              }
          }
          
        }
        if (table[i].rows.length-1 === arr[i]) {
           table[i].style.display = "none";
        } else {
        	 table[i].style.display = "";
        }
    }

}