JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <caption><span>Legendary fictional heroes</span></caption>
<thead>
    <tr>
        <th>Name</th><th>Power</th><th>Nemesis</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Dazzler</td><td>Sound-to-Light Transformation</td><td>Apocalypse</td>
    </tr>
</tbody>  </table>

CSS

caption > span {
    background:#f0f0f0;
    padding:0 4px;
}

th {
    padding:5px;
    border:2px solid #fff;
    background:#333;
    color:#fff;
    text-align:center;
}

td {
    border:#c0c0c0;
    padding:5px;
}