JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<table class="form-301" width="100%" border="0" cellspacing="0" cellpadding="5">
  <tbody>
    <tr>
      <td width="300"></td>
      <td width="10">&nbsp;</td>
      <td colspan="6"><h3>Information about the employee</h3></td>
      <td width="10">&nbsp;</td>
      <td colspan="4"><h3>Information about the case</h3></td>
    </tr>
    <tr>
      <td width="300" rowspan="18"><p>This Injury and Illness Incident Report is one of the first forms you must fill out when a recordable work-related injury or illness has occurred.  Together with the Log of Work-Related injuries and Illnesses and the accompanying Summary, these forms help the employer and OSHA develop a picture of the extent and severity of work-related incidents.</p>
        <p>Within 7 calendar days after you receive information that a recordable work-related injury or illness has occurred, you must fill out this form or an equivalent.  Some state workers' compensation, insurance, or other reports may be acceptable substitutes.  To be considered an equivalent form, any substitute must contain all the information asked for on this form.</p>
        <p>According to Public Law 91-596 and 29 CFR 1904, OSHA's recordkeeping rule, you must keep this form on file for 5 years following the year to which it pertains</p>
      <p>If you need additional copies of this form, you may photocopy and use as many as you need.</p>
      <table width="100%" border="0" cellspacing="0" cellpadding="10">
        <tbody>
          <tr>
            <td>Completed By</td>
            <td colspan="3"><input type="text" name="completed-by-name"></td>
            </tr>
          <tr>
            <td>Title</td>
            <td colspan="3"><input type="text" name="completed-by-title"></td>
            </tr>
          <tr>
            <td>Phone</td>
            <td><input type="phone" name="completed-by-phone"></td>
            <td>Date</td>
            <td><input type="date" name="completed-by-date"></td>
          </tr>
       ...

CSS

table.form-301{
  font-family:helvetica;
  font-size: 12px;
}
table.form-301 p{
  font-family:helvetica;
  font-size: 14px;
  margin: 20px;
}
table.form-301 input[type="text"]{
  width:calc(100% - 12px);
  padding: 5px;
  border:none;
  border-radius: 0px;
  border-bottom: solid 1px #666;
  background-color: #fff;
  font-size: 12px;
  
}
table.form-301 input[type="date"], table.form-301 input[type="time"], table.form-301 input[type="phone"]{
  max-width:calc(100% - 12px);
  padding: 5px;
  border:none;
  border-radius: 0px;
  border: solid 1px #666;
  background-color: #fff;
  font-family:helvetica;
  font-size: 12px;
  width: 90px;
}
table.form-301 textarea{
  width:calc(100% - 12px);
  padding: 5px;
  border:none;
  border-radius: 0px;
  border: solid 1px #666;
  background-color: #fff;
  font-family:helvetica;
  font-size: 12px;
  min-height: 60px;
}
span.numbered{
  margin-left: 5px;
  margin-right: -5px;
  display:inline-block;
  padding: 2px;
}
span.numbered.private{
  background-color:#dedede;
}