JSFiddle - React, Tailwind, and code Playground

by Andrej Sharapov

HTML

<table>
  <tr class="turn">
    <td colspan="4" class="text-center">title</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr class="turn">
    <td colspan="4" class="text-center">title</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr class="turn">
    <td colspan="4" class="text-center">title</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

CSS

.text-center {
  text-align: center;
  background-color: #333;
  color: #fff;
}