JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>H1 is<br />
                here <div class="cl"><span>[-]</span></div></th>
            <th>H2<div class="cl"><span>[-]</span></div></th>
            <th>H3<div class="cl"><span>[-]</span></div></th>
        </tr>
    </thead>
    <tbody>
        <tr><td>a1</td><td>b1</td><td>c1</td></tr>
    </tbody>
</table>

CSS

table{
    background-color: yellow;   
    padding: 1em;
}

td{
    margin: 2px;
}

th
{
    vertical-align: center;
    background-color: gray; 
    text-align: center;
}


.cl{ text-align: center }