JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
	<!-- Bootstrap -->
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
	<!-- Datatables -->
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
	<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset=utf-8 />
	<title>Morning Report</title>
</head>

<body>
	<div class="container">
        <div class="center">
            <h3 class="pageheadh">Morning Report Tracker</h3>
		<!--<input type="text" class="global_filter" id="global_filter">-->
		<div class="clearfix"></div>
		<ul class="nav nav-tabs">
			<li class="active"> <a href="#1" data-toggle="tab">IT</a>
			</li>
			<li><a href="#2" data-toggle="tab">HR</a>
			</li>
			<li><a href="#3" data-toggle="tab">Dept3</a>
			</li>
            <li><a href="#4" data-toggle="tab">Dept4</a>
			</li>
            <li><a href="#5" data-toggle="tab">Dept5</a>
			</li>
            <li><a href="#6" data-toggle="tab">Dept6</a>
			</li>
            <li><a href="#7" data-toggle="tab">Dept7</a>
			</li>
            <li><a href="#8" data-toggle="tab">Dept8</a>
			</li>
            <li><a href="#9" data-toggle="tab">Dept9</a>
			</li>
            <li><a href="#10" data-toggle="tab">Dept10</a>
			</li>
            <li><a href="#11" data-toggle="tab">Dept11</a>
			</li>
		</ul>
		<div class="tab-content ">
			<div class="tab-pane active" id="1">
				<table id="it" class="table...

CSS

.pageheadh {
      font-size: 30px;
      font-weight: bolder;
      color: black;
      text-align: center;
  }
  .pageheadp {
      text-align: center;
      color: black;
      font-weight: bold;
  }
  #sideNavBox {
      display: none;
    }
  .ms-core-pageTitle {
      display: none;
   }
   .container {
       margin-right: auto;
       margin-left: auto;
   }
   #contentRow{
       padding-right: 20px;
   }
   .btn.btn-info.btn-md {
    background: #104723;
    border-color: #104723;
    border-radius: 3px;
    float: right;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 40px;
    margin: auto auto auto 50px;
}

.btn.btn-info.btn-md:active {
    background: #104723;
    border-color: #104723;
    border-radius: 3px;
    float: right;
    display: inline-block;
    position: absolute;
    margin-right: -40px;
}

.pageheadh {
    font-size: 30px;
    font-weight: bolder;
    color: black;
    text-align: center;
    display: inline-block;
}

.pageheadp {
    text-align: center;
    color: black;
    font-weight: bold;
}

.center {
    align-items: baseline;
    justify-content: center;
    text-align: center;
    padding-right: 10px;
    position: relative;
}
#contentBox { margin-left: 0px }

JavaScript

function loadData() {
    var uri = webAppUrl + "/_api/web/lists/getbytitle('MockMorningReport')/items?$select=User/Id,User/Title,Department,Locations,Sunday,Monday,MondayStatus,MondayLocation,Tuesday,TuesdayStatus,TuesdayLocation,Wednesday,WednesdayStatus,WednesdayLocation,Thursday,ThursdayStatus,ThursdayLocation,Friday,FridayStatus,FridayLocation&$expand=User";
    
            $.ajax({
                url: uri,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                        var table = $('#it').DataTable();
                        var table1 = $('#hr').DataTable();
                        var table2 = $('#Dept3').DataTable();
                        var table3 = $('#Dept4').DataTable();
                        var table4 = $('#Dept5').DataTable();
                        var table5 = $('#Dept6').DataTable();
                        var table6 = $('#Dept7').DataTable();
                        var table7 = $('#Dept8').DataTable();
                        var table8 = $('#Dept9').DataTable();
                        var table9 = $('#Dept10').DataTable();
                        var table10 = $('#Dept11').DataTable();
                        table.rows.add(data.d.results).draw();
                        table1.rows.add(data.d.results).draw();
                        table2.rows.add(data.d.results).draw();
                        table3.rows.add(data.d.results).draw();
                        table4.rows.add(data.d.results).draw();
                        table5.rows.add(data.d.results).draw();
                        table6.rows.add(data.d.results).draw();
                       ...