JSFiddle - React, Tailwind, and code Playground

HTML

<div class='ux-data-table'>
  <table>
    <thead>
      <tr>
        <th style="width:20px">#</th>
        <th style="width:20px">Col 1</th>
        <th style="width:20px">Col 2</th>
        <th style="width:20px">Col 3</th>
        <th style="width:20px">Col 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Item 1</td>
        <td>CD player</td>
        <td>Used</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Item 2</td>
        <td>Variscope</td>
        <td>Used</td>
        <td>General</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Item 3</td>
        <td>Microphone</td>
        <td>New</td>
        <td>Mastersound</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Item 4</td>
        <td>Cable</td>
        <td>New</td>
        <td>Techable</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.ux-data-table table {
  width: 100%;
}

.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
  background-color: red;
  color: white;
  border: 1px solid black;
}

.ux-data-table td {
  background-color: white;
  color: red;
  border: 1px solid black;
}