JSFiddle - React, Tailwind, and code Playground

HTML

<table id="example" class="stripe" cellspacing="0" width="100%">
        <thead class="mytableheader">
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th style="font-weight:normal">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
          </tbody>
  </table>

CSS

.mytableheader { 
    background-color: #4B0082; 
    border-bottom: 1px;
    color: #fff; 
    font-family: 'HelveticaNeue-Light', Helvetica, Arial; 
    font-size: 16px; 
    padding: 5px; 
    text-align: left;
}
.mytableheader th {
    font-weight: normal;
}