JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTable</title>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.13.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/cr-1.6.1/date-1.2.0/fc-4.2.1/fh-3.3.1/rg-1.3.0/sc-2.0.7/sb-1.4.0/sl-1.5.0/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://https://thegamechanger.us/Editor-PHP-2.0.10/css/editor.dataTables.min.css/"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.13.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/cr-1.6.1/date-1.2.0/fc-4.2.1/fh-3.3.1/rg-1.3.0/sc-2.0.7/sb-1.4.0/sl-1.5.0/datatables.min.js"></script>
<script type="text/javascript" src="https://thegamechanger.us/Editor-PHP-2.0.10/js/dataTables.editor.min.js"></script>
<style type="text/css">
html, body {
background-color: #F9F9F9;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table tbody tr.even:hover, table tbody tr.odd:hover {
background-color: #ccc;
/*cursor: pointer;*/
}
/* Reminder to talke about overriding styles */
.table td {
padding: 0.20rem 0.75rem;
}
.zoomBox2{
zoom:2;
}
.lightRed {
background-color: #f0aaaa
}
.lightGreen {
background-color: #90EE90 !important
}
.lightAmber {
background-color: #fddf97 !important
}
th input {
width: 90%;
}
</style>
</head>
<body style="width: 95%; margin: 0 auto;">
<div style="margin-bottom: 20px;"></div>
<table id="table" class="table table-striped ...