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 = [
		["Raiders","1/15/2021","​Insert something about the offensive report","​​Insert something about the defensive report","​​Insert something about the special teams report​"],
		["Cowboys","1/15/2021","​Insert something about the offensive report","​​Insert something about the defensive report","​​Insert something about the special teams report​"],
		["Redskins","1/15/2021","​Insert something about the offensive report","​​Insert something about the defensive report","​​Insert something about the special teams report​"],
		];

$('#myTable').DataTable().rows.add( dataSet );
    
 }
    
    $(document).ready(function() {
        var collapsedGroups = {};
        var top = '';
        var parent = '';
    console.log('datatable')
        var table = $('#myTable').DataTable({
        "pageLength" : 50,
        initComplete: function () {
        console.log('init')
        },
            "columns": [{
                    "data": "Team",
                    visible: false
                },
				{
                    "data": "WeekOf",
                    visible: false
                },
                {
                    "data": "OffensiveReport"                 
                },
                {
                    "data": "DefensiveReport"
                },
                {
                    "data": "SpecialTeamsReport"
                }
            ],
    
            dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Export Report(s)',
                buttons: [
                    {
                        extend: "pdf",
                        className: "btn-dark"
  ...