JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sb-1.0.0/sp-1.1.1/sl-1.3.1/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sb-1.0.0/sp-1.1.1/sl-1.3.1/datatables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<table id="example" class="table table-hover table-responsive-sm table-striped" hidden>
<thead>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Location</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>Richard</td>
    <td>Albama</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sam</td>
    <td>Georgia</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Anita</td>
    <td>Florida</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Richard</td>
    <td>Albama</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sam</td>
    <td>Georgia</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Anita</td>
    <td>Florida</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Richard</td>
    <td>Albama</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sam</td>
    <td>Georgia</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Anita</td>
    <td>Florida</td>
  </tr>
  </tbody>
</table>

JavaScript

$(document).ready(function() {
 let table = $('#example').DataTable(
    {
    dom: '<"dt-buttons"Bf><"clear">lirtp',
    fixedHeader: true  // There is a bug 
    });
    
    $('#example').prop('hidden', false);
    
    table.fixedHeader.adjust();
});