JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  <meta charset="utf-8"><title>AEC Performance Report</title>
  <style>
  *{  box-sizing:border-box;}
  body {
  font-size:10pt;
  font-weight:normal;  
  font-family:verdana, arial, Sans-Serif;
  color:#000000;
  background:#ffffff;
  max-width:816px;
  margin:0;
  }
  
  .divTblCrsTbRptTable{
  display:inline-block;
  min-width:40%;
  text-align:left;
  margin:0 auto;
  }
  .tblCrsTbRptTable{
  table-layout:fixed;
  border-collapse:collapse;
  width:100%;
  }  
  .tdScrCrsTbRptXHdr{
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  }
  .thScrCrsTbRptXCntAvgHdr{
  width:50px;
  max-width:50px;
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  }  
  .thScrCrsTbRptY{
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  }  
  .tdCrsTbRptTableAvg{
  text-align:center;
  border:.5px solid #002960;
  }
  .tdCrsTbRptTableCnt{
  text-align:center;
  border:.5px solid #002960;
  }
  </style>
  </head>
  <body onload="bodyOnLoad();">
  <div class='divTblCrsTbRptTable' 'max-width:618px' >
  <table id="tbl1" class='tblCrsTbRptTable' style='table-layout:fixed; max-width: 618px;'>
  <tr class='trScrCrsTbRptXHead'><th class='thScrCrsTbRptY' style='width:80px;' ></th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Avg</th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Cnt</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:46px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:71px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:66px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:78px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:85px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:54px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:88px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr'...