JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<button type="button" id="btn-reload">Reload</button>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

CSS

div.dataTables_wrapper div.dataTables_processing {
  top: -10;
  padding: 10px !important;
  background: #F5F8FA !important;
  color: blue !important;
  border: 2px dotted darkgrey;
  border-radius: 3px !important;
  font-size: xx-large !important;
  opacity: 1 !important;
  text-decoration: none;
}

JavaScript

$.mockjax({
  url: '/test/0',
  responseTime: 1000,
  response: function(settings) {
    console.log("Request data: ", settings.data);

    this.responseText = {
      data: [],
    };

    for (var i = 0; i < 100; i++) {
      this.responseText.data.push([
        "A" + (i + 1),
        "B" + (i + 1),
        "C" + (i + 1),
        "D" + (i + 1),
        "E" + (i + 1),
        "F" + (i + 1)
      ]);
    }
  }
});

$(document).ready(function() {
  var table = $('#example').DataTable({
    ajax: '/test/0',
    'processing': true,
    'language': {
      'loadingRecords': '&nbsp;',
      'processing': 'Loading votes...'
    }
  });

  $('#btn-reload').on('click', function() {
    table.ajax.reload();
  });
});