JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script language="javascript" src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.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>
<script>
$(document).ready( function () {
  var table = $('#example').DataTable({
    orderCellsTop: true,
  });

    // Add filtering
  table.columns().every( function () {
      var that = this;

      // Create the `select` element
      var select = $('<select><option value=""></option></select>')
        .appendTo($('thead tr:eq(1) td').eq( this.index() )
        )
        .on( 'change', function() {
          that
            .search($(this).val())
            .draw();
        } );

      // Add data
      var newArray =
      this
        .data()
        .sort()
        .map(function(d) {
          return d.toLowerCase().replace(/\b\w/g, function(l){ return l.toUpperCase() })})
        .unique()
        .each( function(d) {
          select.append($('<option>' + d + '</option>'));
        } );

      // Restore state saved values
      var state = this.state.loaded();
      if ( state ) {
        var val = state.columns[ this.index() ];
        select.val( val.search.search );
      }
  } );
} );

</script>
</head>
<body>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th >Name</th>
                <th >Position</th>
                <th >Office</th>
                <th...