JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="quickSearch" placeholder="Введите первые буквы"/>
<table>
  <tr>
    <th>Заголовок</th>
  </tr>
  <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>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Aron</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Linda</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"),
        tr = [];

    for (i = 0; i < table.length; i++) {
        for (var a = 0; a < table[i].rows.length; a++) {
            tr.push(table[i].rows[a])
        }
    }

    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0] || tr[i].getElementsByTagName("th")[0];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}