JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<div class="searchbox" select id="table-filter">
<p><label for="dd1">Name:</label> <span id="dropdown1" input type="checkbox">
  </span>
</p>

<p><label for="dd2">Postion:</label> <span id="dropdown2">
  </span>
</p>

<p><label for="dd3">Office:</label> <span id="dropdown3">
</span>
</p>
  <button type="button"  id="test">Clear Filters</button>
</div>
  <div id="table-wrap">
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          
            
          </tr></tbody></table>
</div>

JavaScript

$(document).ready(function() {
  $('#table-wrap').hide();
  var table = $('#example').DataTable({
    responsive: true,
    mark: true,
    stateSave: false,
    searching: true
  });

  buildCheckboxes(table); // Use buildCheckboxes instead of buildSelect
  $('#table-filter').on('change', function () {
    // show the tbody when the user clicks on a filter option
    $('#table-wrap').show();
    table.columns.adjust();
    table.search(this.value).draw();
  });

  table.on('draw', function() {
    buildCheckboxes(table); // Use buildCheckboxes instead of buildSelect
  });
  
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
    $('#table-wrap').hide();
  });
});

function buildCheckboxes(table) { // Define buildCheckboxes instead of buildSelect
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    if (counter === 1) { // Only modify the first column
      var checkboxContainer = $('#dropdown' + counter).empty();
      column.data().unique().sort().each(function(d, j) {
        var label = $('<label></label>').text(d);
        var checkbox = $('<input type="checkbox" />').val(d);
        label.prepend(checkbox);
        checkboxContainer.append(label);
        checkbox.on('change', function() {
          var selectedValues = checkboxContainer.find('input:checked').map(function() {
            return $.fn.dataTable.util.escapeRegex($(this).val());
          }).get().join('|');
          column
            .search(selectedValues || '', true, false)
            .draw();
        });
      });
    } else {
      var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')
        .appendTo($('#dropdown' + counter).empty())
        .on('change', function() {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

          column
            .search(val ? '^' + val +...