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>
           ...

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

var dataSet =[
["Name 1","Locations Here","03/14/2021","03/15/2021","03/16/2021","03/17/2021","03/18/2021", "03/19/2021","IT"],
["Name 2","Locations Here","03/14/2021","03/15/2021","03/16/2021","03/17/2021","03/18/2021", "03/19/2021","HR"],
["Name 3","Locations Here","03/14/2021","03/15/2021","03/16/2021","03/17/2021","03/18/2021", "03/19/2021","IT"],
["Name 4","Locations Here","03/14/2021","03/15/2021","03/16/2021","03/17/2021","03/18/2021", "03/19/2021","Dept4"],
];

$(document).ready( function () {

    function filterGlobal () {
        $('#it').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#hr').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept3').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept4').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept5').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept6').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept7').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept8').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept9').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept10').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#Dept11').DataTable().search(
            $('#global_filter').val()
        ).draw();
    }
      var table = $('#it').DataTable({
            data : dataSet,
            columns: [
            { title: "Name" },
            { title: "Locations" },
            { title: "Sunday" },
            { title: "Monday" },
            { title: "Tuesday" },
            { title: "Wednesday" },
            { title: "Thrusday"},
            {title: "Friday"},
            {title: "Department",
        ...