JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!--
    <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="page-wrapper chiller-theme">
    <main class="page-content">
        <div class="container-fluid body-content">
            <p />

            <table class="table">
    <thead>
        <tr>
            <th></th>
            <th>User ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Admin Access</th>
            <th>Active</th>
            <th>Security Template</th>
        </tr>
    </thead>  
</table>
            <hr />
        </div>

    </main>
  ...

CSS

body {
background-color: var(--idsBlue);
    background-color: #253455;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "Open Sans",Arial,sans-serif;
    color: var(--idsBlue);
    color: #253455;
    margin: auto;
    height: 100%;
    min-width: 280px;

      font-size: .9rem;
}
.body-content{
      background: var(--idsWhite);
    background: #fff;
    min-height: 500px;
    overflow-x: auto;
}
.page-wrapper {
    height: 100vh;
}
.page-wrapper .page-content {
    overflow-x: auto;
    display: inline-block;
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
}
label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}
.form-row input[type="text"], input[type="email"], input[type="password"], select {
    width: 100%;
}

JavaScript

$(document).ready( function () {
  loadTable(true);
} );
function loadTable(aIncludeInactiveUsers) {
  /*var url = '@Url.Action("GetUsers","UserSetup")';
        var form = $("#_AjaxAntiForgeryForm");
        var token = $('input[name="__RequestVerificationToken"]', form).val();
        var link = '@Url.Action("View","UserSetup")';*/

  $('.table').DataTable({
    /*"ajax": {
                "type":"POST",
                "data": {
                    __RequestVerificationToken: token,
                    IncludeInactive: aIncludeInactiveUsers
                },
                "url": url,
                "data": dataJson,
                "dataSrc": function (json) {
                    var return_data = new Array();
                    for (var i = 0; i < json.length; i++) {
                        var wActive = json[i].active ? "Yes" : "No";
                        return_data.push({
                            'userKey' : '<a href="' + link + '?UserKey=' + json[i].userKey + '" title = "View"><span class="ico icon-enter"/></a>',
                            'userID': json[i].userID,
                            'firstName': json[i].firstName,
                            'lastName': json[i].lastName,
                            'emailAddress': json[i].emailAddress,
                            'adminAccessRole': json[i].adminAccessRole,
                            'active': wActive,
                            'securityTemplate': json[i].securityTemplate
                        });
                    }
                    return return_data;
                }
            },*/
    "data" : [
    {'userKey':1,'userID':'bob','firstName':'Bob',
     'lastName':'Smith','emailAddress':'[email protected]',
     'adminAccessRole':'1','active':true,'securityTemplate':'test'}
  ],
    "deferRender": true,
    "columns": [
      { "data": "userKey" },
      { "data": "userID" },
      { "data": "firstName" },
      { "data": "lastName" },
      { "data": "emailAddress" },
     ...