JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/datatables.min.css">

   <table id="example">
   <thead><tr><th>Title</th><th>Title2</th></tr>
 
   </thead>

   <tbody>
   
   <tr><td>Hello</td><td>there</td></tr>
   <tr><td>Hello</td><td>there</td></tr><tr><td>Hello3</td><td>there</td></tr><tr><td>Hello1</td><td>there</td></tr>
   </tbody>
   </table>

CSS

body{
  height:1300px;
}

JavaScript

$(document).ready( function () {
  
  var $searchHeader = $("#example thead tr").clone();
  var $this = this;

  $searchHeader.find("th").each(function () {
    var title = $.trim($(this).text());

    if (title) {
      $(this).html('<input class="form-control" type="text" placeholder="Search ' + title + '" />');
    }
  });

  $("#example thead").prepend($searchHeader);
  
  var table = $('#example').DataTable({ 
      fixedHeader: true
  });
  
  
  // Apply the search
  table.columns().every(function () {
    var column = this;

    var $input = $("thead tr").eq(0).find("th").eq(this.index()).find("input");

    var timeout = 0;
    $input.on('keyup change', function () {
      clearTimeout(timeout);
      var searchInput = this;

      timeout = setTimeout(function () {

        if (column.search() !== searchInput.value) {
          column.search(searchInput.value).draw();
        }
      }, 1000);


    });
  });
  
});