JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="10" class="form300A">
  <tbody>
    <tr>
      <td valign="top"><h2>OSHA’s Form 300A(Rev. 04/2004)</h2>
      <h4>Summary of Work-Related Injuries and Illnesses</h4></td>
      <td valign="top">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td><h2>U.S. Department of Labor</h2>
			  <h4>Occupational Safety and Health Administration</h4></td>
			  <td width="64"><img style="height: 64px;" src="https://agrisphere-portal.com/oshaInjuryReportManagment/assets/usdol.png"></td>
			</tr>
		  </tbody>
		</table>
	  </td>
    </tr>
    <tr>
      <td width="50%" valign="top">
		 <p>All establishments covered by Part 1904 must complete this Summary page, even if no work-related injuries or illnesses occurred during the year. Remember to review the Log to verify that the entries are complete and accurate before completing this summary.</p>
		 <p>Using the Log, count the individual entries you made for each category. Then write the totals below, making sure you've added the entries from every page of the Log. If you had no cases, write &#8220;0&#8221;.</p>
		  <p>Employees, former employees, and their representatives have the right to review the OSHA Form 300 in its entirety. They also have limited access to the OSHA Form 301 or its equivalent. See 29 CFR Part 1904.35, in OSHA’s recordkeeping rule, for further details on the access provisions for these forms.</p>
		<table class="summary-totals" width="100%" border="0" cellspacing="0" cellpadding="10">
        <tbody>
          <tr>
            <th colspan="4">Number of Cases</th>
            </tr>
          <tr>
            <td width="25%" class="column-heading">Total number of deaths</td>
            <td width="25%" class="column-heading">Total number of cases with days away from work</td>
            <td width="25%" class="column-heading">Total number of cases with job transfer or restriction</td>
            <td...

CSS

table.form300A{
  font-family: helvetica;
}
table.form300A input{
  width: 100%;
  display: block;
  margin: auto;
  text-align: center;
  border: none;
  border-bottom: solid 1px #000;
  padding: 5px;
  color: #000;
  font-size: 17px;
}
table.form300A th{
  background-color: #000;
  color:#fff;
  font-style: italic;
  font-size: 21px;
}
table.form300A td{
  font-size: 12px;
}
table.form300A .column-heading{
  text-align:left;
  font-size: 13px;
  vertical-align: top;
}
table.form300A .column-name{
  text-align:center;
}
table.form300A table.summary-totals{
  
}
table.form300A table.summary-totals input{
  width: 100%;
  display: block;
  margin: auto;
  text-align: center;
  border: none;
  border-bottom: solid 1px #000;
  padding: 5px;
  color: #000;
  font-size: 17px;
}