JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<div>
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a href="#tab_1" data-bs-toggle="tab" class="nav-link position-relative">tab_1</a>
    </li>
    <li class="nav-item">
      <a href="#tab_2" data-bs-toggle="tab" class="nav-link position-relative">tab_2</a>
    </li>
    <li class="nav-item">
      <a href="#tab_3" data-bs-toggle="tab" class="nav-link position-relative">tab_3</a>
    </li>
    <li class="nav-item">
      <a href="#tab_4" data-bs-toggle="tab" class="nav-link position-relative">tab_4</a>
    </li>
    <li class="nav-item">
      <a href="#tab_5" data-bs-toggle="tab" class="nav-link position-relative">tab_5</a>
    </li>
    <li class="nav-item">
      <a href="#tab_6" data-bs-toggle="tab" class="nav-link position-relative">tab_6</a>
    </li>
    <li class="nav-item">
      <a href="#tab_7" data-bs-toggle="tab" class="nav-link position-relative">tab_7</a>
    </li>
    <li class="nav-item">
      <a href="#tab_8" data-bs-toggle="tab" class="nav-link position-relative">tab_8</a>
    </li>
    <li class="nav-item">
      <a href="#tab_9" data-bs-toggle="tab" class="nav-link position-relative">tab_9</a>
    </li>
  </ul>
</div>
<div class="widget-content tab-content" style="font-size: 8pt; padding: 0;">
  <div id="tab_1" class="tab-pane">
    <div class="form-horizontal white">
      <table id="tab_1Table" class="table cell-border compact order-column stripe">
        <thead>
          <tr>
            <th>Date</th>
            <th>Order Id</th>
            <th>Result</th>
           ...

JavaScript

function padValue(value) {
    return (value < 10) ? "0" + value : value;
}

function formatDateTime(dateVal) {
    var newDate = new Date(dateVal);

    var sMonth = padValue(newDate.getMonth() + 1);
    var sDay = padValue(newDate.getDate());
    var sYear = newDate.getFullYear();
    var sHour = newDate.getHours();
    var sMinute = padValue(newDate.getMinutes());
    var sAMPM = "AM";

    var iHourCheck = parseInt(sHour);

    if (iHourCheck > 12) {
        sAMPM = "PM";
        sHour = iHourCheck - 12;
    }
    else if (iHourCheck === 0) {
        sHour = "12";
    }

    sHour = padValue(sHour);

    return sMonth + "/" + sDay + "/" + sYear + " " + sHour + ":" + sMinute + " " + sAMPM;
}

function initTab_1() {
    $('#tab_1Table thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#tab_1Table thead');
    //Setting all of the tables displaying info in the page into datatables for sorting and scrollability
    let table = $('#tab_1Table').DataTable({
        //scrollY: "400px",
        scrollX: "900px",
        pageLength: 50,
        orderCellsTop: true,
        dom: "tr" +
            "<'my-wrapper'<'pagination'p><'dt-info'i>>",
        searching: true,
        processing: true,
        search: {
            return: true
        },
//        serverSide: true,
//        ajax: {
//            url: wTransUrl + "?cid="+$('#Company_Id').val(),
//            type: "POST",
//        },
//        autoWidth: false,
//        order: [[0, 'desc']],
//        columns: [
//            {
//                data: "transactiondate",
//                render: function (data, type) {
//                    if (data != "") {
//                        let date = formatDateTime(data)
//                        return type === 'display'
//                            ? date : data;
//                    } else { return data; }
//                },
//            },
//            { data: "orderid" },
//            { data: "orderstatus" },
//            {...