JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table-body">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>ad</th>
            <th>Tel</th>
            <th>Fax</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>12311</td>
            <td>Apple</td>
            <td>A1fgsdfgfhynfg</td>
            <td>1-11</td>
            <td>1-22</td>
        </tr>
        <tr>
            <td>12312</td>
            <td>Banana</td>
            <td>A2dfgdfgdfgdfg</td>
            <td>2-11</td>
            <td>2-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>3-11</td>
            <td>3-22</td>
        </tr>
        <tr>
            <td>12314</td>
            <td>Duriaen</td>
            <td>A456ghkfghk</td>
            <td>4-11</td>
            <td>4-22</td>
        </tr>
        <tr>
            <td>12315</td>
            <td>Apple</td>
            <td>A1uyjmghtd</td>
            <td>5-11</td>
            <td>5-22</td>
        </tr>
        <tr>
            <td>12316</td>
            <td>Banana</td>
            <td>A2yukmkfgmufc</td>
            <td>6-11</td>
            <td>6-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>123117</td>
            <td>Duriaen</td>
            <td>A4nuftkｆ</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>123118</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>123119</td>
            <td>Cherry</td>
            <td>Aoikdhpnko</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4ueowrqp</td>
            <td>8-11</td>
       ...

CSS

div.tablewrapper, div.headerwrapper, div.bodywrapper {
    border:0px;
}
div.tablewrapper {
    position:relative;
}
div.headerwrapper {
    background-color:#1BA7F5;
}
div.bodywrapper {
    margin-top:35px;
    height:265px;
    overflow-x: hidden;
    overflow-y:scroll;
    border-bottom:solid 2px #1BA7F5;
}
table.header, table#table-body {
    border:0px;
    border-collapse:collapse;
    border-spacing:0px;
    text-align:center;
    table-layout: fixed;
}
table.header {
    height:34px;
    line-height:32px;
    background-color:#1BA7F5;
    color:#FFF;
    width: 100%;
}
table.header th {
    padding-left:10px;
    text-align:left;
    font-weight: normal;
}
th, td {
    word-break: break-all;
}
table#table-body tr {
    line-height:30px;
    border-top:1px solid #C4C4C4;
}
#table-body th {
    height:0;
    padding: 0;
    /* this is just for demo purposes as you would control all borders through css */
    border: none !important;
}
#table-body tr:hover {
    background-color:#FFFF99;
}
div.s_box {
    top:34px;
    width:100%;
    height:35px;
    position:absolute;
    padding: 5px 5px;
    background: #c4c4c4;
    box-sizing: border-box;
}
#search-criteria {
    -webkit-appearance: none;
    height:24.95px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    line-height: 23px;
    background: #fff;
}
#search-criteria:focus {
    outline:none;
}
#count {
    position: absolute;
    top:8px;
    right: 8px;
    color: #FFF;
    background-color: #9EB4C2;
    line-height: 19px;
    font-size: 15px;
    padding: 0 5px;
    border-radius: 3px;
}
#table-body tbody td.lefty {
    text-align:left;
}
#table-body, table.header tr> *:nth-child(1) {
    width:10%;
}
#table-body, table.header tr> *:nth-child(2) {
    width:10%;
}
#table-body, table.header tr> *:nth-child(3) {
    width:40%;
}
#table-body, table.header tr> *:nth-child(4) {
    width:20%;
}
#table-body, table.header tr> *:nth-child(5) {
    width:20%;
}

JavaScript

var dostuff =
    function () {

    var tbody = "#table-body";
    var row = $("#table-body tbody>tr");

    $("<div>", {
        class: "tablewrapper"
    }).insertBefore(tbody);
    $("<table>", {
        class: "header"
    }).appendTo($("<div>", {
        class: "headerwrapper"
    }).appendTo("div.tablewrapper"));
    $(tbody).appendTo($("<div>", {
        class: "bodywrapper"
    }).appendTo("div.tablewrapper"));
    $(tbody + ">thead").clone().val("").appendTo("table.header");
    $("table.header>tr").removeClass("header_hidden");
    $(tbody).find("thead th").empty();
    $(tbody).find("tbody td:nth-child(3)").addClass("lefty");
    $("<input>", {
        type: "text"
    }).attr("id", "search-criteria").appendTo($("<div>", {
        class: "s_box"
    }).insertAfter("div.bodywrapper"));
    $("<div>").attr("id", "count").appendTo("div.s_box");

    resizeTable();
    //var bodyTd = $("#table-body tr td");

    $(window).resize(resizeTable);

    //search function
    $("#search-criteria").on("keyup", function () {
        var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
            return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
        }).toLowerCase();
        //var row = $("#table-body tbody>tr");

        if (keyword !== "") {
            row.each(function () {

                var td_word = $(this).text().toLowerCase();
                //shorthand if function
                $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
            });
            var srowCount = row.filter(":visible").length;
            document.getElementById('count').innerHTML = srowCount;
            rowCount();
        } else {
            $("tr.s_empty").remove();
            row.show();
            document.getElementById('count').innerHTML = row.length;
        }

        resizeTable();
    });

//    var row = "#table-body tbody>tr";
    var srowCount = row.filter(":visible").length;
   ...