JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.js"></script>
<div class="container">
  <div class="card bg-light m-2 mb-5">
    <div class="card-body">
    <div class="">
    
      <table id="data-table" class="table table-striped table-hover">
        <thead>
          <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
            <th>Fourth</th>
            <th>Fifth</th>
            <th>Sixth</th>
            <th>Seventh</th>
            <th>Eight</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Lorem</td>
            <td>ipsum</td>
            <td>dolor</td>
            <td>sit</td>
            <td>amet</td>
            <td>consectetur</td>
            <td>--</td>
            <td>--</td>
          </tr>
          <tr>
            <td>Lorem</td>
            <td>ipsum</td>
            <td>dolor</td>
            <td>sit</td>
            <td>amet</td>
            <td>consectetur</td>
            <td>--</td>
            <td>--</td>
          </tr>
          <tr>
            <td>Lorem</td>
            <td>ipsum</td>
            <td>dolor</td>
            <td>sit</td>
            <td>amet</td>
            <td>consectetur</td>
            <td>--</td>
            <td>--</td>
         ...

CSS

.container {
  max-width: 700px;
}

JavaScript

var table = $("#data-table").DataTable({
	 dom:
      "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
})

new $.fn.DataTable.FixedHeader(table, {})