JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
<link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
<link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>

<h5><strong>Football Weekly Report</strong></h5>
        <div class ="container">
            <table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
     ...

CSS

#myform {
                margin:0 auto;
                width:250px;
                padding:14px;
                align: center;
            }

            label {
                width: 10em;
                float: left;
                margin-right: 0.5em;
                display: block;
                vertical-align: middle;
            }
            .submit {
                float:right;
            }
            h5{
            text-align: center;
			font-size: 40px;
            }
            fieldset {
                background:#EBF4FB none repeat scroll 0 0;
                border:2px solid #B7DDF2;
                width: 450px;
            }

            legend {
                color: #fff;
                background: #80D3E2;
                border: 1px solid #781351;
                padding: 2px 6px;
                text-align: center;
            }
            .elements {
                padding:10px;
            }
            p {
                border-bottom:1px solid #B7DDF2;
                color:#666666;
                font-size:12px;
                margin-bottom:20px;
                padding-bottom:10px;
            }
            span {
                color:#666666;
                font-size:12px;
                margin-bottom:1px;
                
            }
            .btn{
            padding: 4px 12px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            border: 1px solid #B7DDF2;
            
            }

            .btn:hover{
            color: #333333;
            background-color: #e6e6e6;
            }

            div.container {
                min-width: 980px;
                margin: 0 auto;
            }
            .header {
            padding:...

JavaScript

function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
		var dataSet = [
         {
            "WeekOf":"2021-01-15",
            "Team":"Cowboys",
            "Tasks":"Insert something about the tasks",
            "Deliverables":"Insert something about the deliverables",
            "Actions":"Insert something about the actions",
            "Billable":"Insert anything billable",
            "Non_Billable":"Insert anytihng non-billable",
            "Upcoming":"Insert something about the upcoming event",
            "Training":"Insert something about the training",
            "Resource":"Insert something about the resources",
            "Support":"Insert something about the support"
         },
         {
            "WeekOf":"2021-01-15",
            "Team":"Raiders",
            "Tasks":"Insert something about the tasks",
            "Deliverables":"Insert something about the deliverables",
            "Actions":"Insert something about the actions",
            "Billable":"Insert anything billable",
            "Non_Billable":"Insert anytihng non-billable",
            "Upcoming":"Insert something about the upcoming event",
            "Training":"Insert something about the training",
            "Resource":"Insert something about the resources",
            "Support":"Insert something about the support"
         },
         {
            "WeekOf":"2021-01-19",
            "Team":"Cowboys",
            "Tasks":"Insert something about the tasks",
            "Deliverables":"Insert something about the deliverables",
            "Actions":"Insert something about the actions",
            "Billable":"Insert anything billable",
            "Non_Billable":"Insert anytihng non-billable",
            "Upcoming":"Insert something about the upcoming event",
            "Training":"Insert something about the training",
            "Resource":"Insert something about the resources",
           ...