JSFiddle - React, Tailwind, and code Playground

HTML

<table id="agents" style="margin-bottom: 10px">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Join Date</th>
                    <th>First Name </th>
                    <th>Last Name</th>
                    <th>Website</th>
                    
                </tr>
            </thead>
            <tfoot>
            <tr>
                <th>Id</th>
                    <th>Join Date</th>
                    <th>First Name </th>
                    <th>Last Name</th>
                    <th>Website</th>
                    
            </tr>
        </tfoot>
            <tbody>
             <tr>
                <td>12</td>
                <td>aaa</td>
                <td>lll</td>
                <td>test12</td>              
            </tr>
             <tr>
                <td>13</td>
                <td>bbb</td>
                <td>xxx</td>
                <td>test13</td>              
            </tr>
            <tr>
                <td>14</td>
                <td>ccc</td>
                <td>zzz</td>
                <td>test14</td>              
            </tr>
            </tbody>
        </table>

CSS

tfoot {
    display: table-header-group;
}

    tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

JavaScript

<script type="text/javascript">

        $(document).ready(function () {


            $('#agents tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });



  var tableInstance  =  $('#agents').DataTable({
                "bServerSide": true,
                "sAjaxSource": "@Url.Action("NewPromotersQuery", "Admin")",
                "bProcessing": true,
                "type": "POST",
                "pagingType": "full_numbers",
                "sServerMethod" : "POST",
      //"info": "true",
               "searchable":"true",
                "sScrollX": "100%",
                "bAutoWidth": false, // Disable the auto width calculation 
                "aoColumns": [
                       { "sName": "Id" },
                       { "sName": "Join Date" },
                       { "sName": "First Name" },
                       { "sName": "Last Name" },
                       { "sName": "Website" },
                       { "sName": "Email" },
                       { "sName": "CellPhone" },
                       { "sName": "HomePhone" },
                       { "sName": "Cancellation Date" },
                       { "sName": "Status (BizCenter)" },
                       { "sName": "Status (Qualifed)" },
                       { "sName": "Status(Level)" },
                       { "sName": "Country" },
                       { "sName": "State" },
                       { "sName": "UserType" },
                       { "sName": "Promo Date" },
                       { "sName": "Position" },
                       { "sName": "Personal Qualified Resellers" },
                       { "sName": "Team Qualified Resellers" },
                       { "sName": "Direct Upline" },
                       { "sName": "Sponsor" },
                       { "sName": "Manager" },
                       { "sName": "Senior" },
                       {...