JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
  <tr>
    <th colspan="3">match</th>
    <th>date</th>
    <th>location</th>
    <th>something</th>
    <th>else</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="p1">player1</td>
    <td>vs</td>
    <td class="p2">player2</td>
    <td>2.2.2017</td>
    <td>USA</td>
    <td>something</td>
    <td>else</td>
  </tr>
  <tr>
    <td>player1</td>
    <td>vs</td>
    <td>player2</td>
    <td>2.2.2017</td>
    <td>USA</td>
    <td>something</td>
    <td>else</td>
  </tr>
  <tr>
    <td>player1</td>
    <td>vs</td>
    <td>player2</td>
    <td>2.2.2017</td>
    <td>USA</td>
    <td>something</td>
    <td>else</td>
  </tr>
</tbody>
</table>

CSS

td {
  border: 1px solid black;
}
.p1, .p2

JavaScript

<