JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
  <table class="table table-hover">
    <tr class="row">
      <td class="col-sm-2 red">16.67%</td>
      <td class="col-sm-2 blue">16.67%</td>
      <td class="col-sm-3 green">25%</td>
      <td class="col-sm-1 yellow">8.33%</td>
      <td class="col-sm-1 orange">8.33%</td>
      <td class="col-sm-3 purple">25%</td>
    </tr>
  </table>
</div>

CSS

.table {
  color: white;
  text-align: center;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
.orange {
  background-color: orange;
}
.purple {
  background-color: purple;
}