JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<p>
  <table>
    <tr>
      <th colspan="2">List of states</th>
    </tr>
    <tr>
      <td class="color-box Production_Producing100"></td>
      <td>Production (full)</td>
    </tr>
    <tr>
      <td class="color-box Production_ProducingReduced"></td>
      <td>Production (reduced speed)</td>
    </tr>
    <tr>
      <td class="color-box Production_ReadyForProduction"></td>
      <td>Ready for production</td>
    </tr>    
    <tr>
      <td class="color-box Production_Producing0HeldAbortedStopped"></td>
      <td>Held / Aborted / Stopped</td>
    </tr>
    <tr>
      <td class="color-box Production_Producing0Suspended"></td>
      <td>Suspended</td>
    </tr>
    <tr>
      <td class="color-box NoProduction_UnknownMode"></td>
      <td>No production / unknown mode</td>
    </tr>
    <tr>
      <td class="color-box SwitchedOff_NoConnection"></td>
      <td>Switched off / no connection</td>
    </tr>

  </table>
</p>
<p>
  <table>
    <tr>
      <th colspan="2">List of phases</th>
    </tr>
    <tr>
      <td class="color-box Production"></td>
      <td>Production</td>
    </tr>
    <tr>
      <td class="color-box Sterilization"></td>
      <td>Sterilization</td>
    </tr>
    <tr>
      <td class="color-box Cleaning"></td>
      <td>Cleaning</td>
    </tr>
    <tr>
      <td class="color-box Maintenance_Manual"></td>
      <td>Maintenance / Manual</td>
    </tr>    
  </table>
</p>

CSS

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  background: white;
}

table {
  background-color: #eee;
  min-width: 350px;
  padding: 10px;
}

td,
th {
  height: 20px;
  text-align: left;
  padding: 2px;
  padding-left: 10px;
}

th {
  padding-left: 0;
  border-bottom: 1px solid white;
}

td.color-box {
  border: 1px solid white;
  width: 20px;
}

.Production_Producing100 {
  background: #00814F;
}

.Production_ProducingReduced {
  background: #99883E;
}

.Production_Producing0HeldAbortedStopped {
  background: #F26522;
}

.Production_Producing0Suspended {
  background: #F4CA25;
}

.Maintenance_Manual {
  background: #F4CA25;
}

.NoProduction_UnknownMode {
  background: #E6E6E6;
}

.SwitchedOff_NoConnection {
  background: #404859;
}

.Production_ReadyForProduction {
  background: #003b24;
}

.Production {
  background: #00814F;
}

.Sterilization {
  background: rgb(159, 94, 223);
}

.Cleaning {
  background: #1A79BF;
}