JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div id="health_div">
  <table width = "100%" class="center">
    <tr>
      <td colspan="6">Health</td>
    </tr>
    <tr>
      <td style="width: 15%">Status</td>
      <td style="width: 2%"></td>
      <td style="width: 8%">Previous</td>
      <td style="width: 8%">Current</td>
      <td style="width: 2%"></td>
      <td style="width: 65%">Comment</td>
    </tr>
    <tr>
      <td>Overall Project Status</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Schedule</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Scope</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Quality</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Cost</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>
<div id="second_row">
  <div id="requirements_div" class="inline_div">

  </div>
  <div id="milestones_div" class="inline_div">

  </div>
  <div id="kpi_div" class="inline_div">

  </div>
</div>
<div id="quality_div">

</div>

CSS

#health_div, #quality_div{
  width: 992px;
}

#quality_div{
  height: 350px;
}

#health_div {
  height: 260px;
}

.inline_div, #quality_div{
  margin-top: 10px;
}

#requirements_div {
  width: 300px;
  height: 260px;
}

#milestones_div {
  width: 350px;
  height: 260px;
}

#kpi_div {
  width: 330px;
  height: 260px;
}

#health_div, .inline_div {
   display: inline-table;
}

#health_div, .inline_div, #quality_div{
  border: 1px black solid;
}

.center{
  text-align: center;
}

.left{
  text-align: left !important;
}

.center, .left {
  vertical-align: middle;
}

#health_div tr td:first-child{
  text-align: left !important;
}

.header_row {
  background-color: #444444;
  color
}