JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>

<link href="/static/css/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/static/css/datatables/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/static/css/datatables/checkbox.css" rel="stylesheet" type="text/css" />
<link href="/static/css/datatables/multiple-select.css" rel="stylesheet" type="text/css" />

<div id="container23">
<section>
<table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Other</th>
            </tr>
         </thead>
         <tbody>
         <tr>
           <td>John</td>
           <td>24</td>
           <td>hui1</td>
          </tr>
          <tr>
           <td>Andrew</td>
           <td>27</td>
           <td>hui2</td>
          </tr>
          </tbody>
          <tfoot>
            <tr class="cus-footer text-center">
                  <th>TEST</th>
                  <th></th>
                  <th></th>
                  </tr>
                  </tfoot>
</table>
</section>
</div>





<style...