JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th class="border gradient cellcontents">Header 1</th>
        <th class="border gradient cellcontents">Header 2</th>
    </tr>
    <tr>
        <td class="border">Content 1</td>
        <td class="border">Content 2</td>
    </tr>
</table>

<br/>

<table>
    <tr>
        <th class="border"><div class="gradient cellcontents">Header 1</div></th>
        <th class="border"><div class="gradient cellcontents">Header 2</div></th>
    </tr>
    <tr>
        <td class="border">Content 1</td>
        <td class="border">Content 2</td>
    </tr>
</table>

CSS

.border {
    border: 1px solid black;
}

.gradient {
    background: #F6F6F6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC), to(#ebebeb)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC',endColorstr='#ebebeb');
    background-image:-moz-linear-gradient(center bottom , #ebebeb, #CCCCCC);
}

.cellcontents {
    padding: 2px;
}