JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <caption>Table Caption</caption>
    <colgroup>
        <col class="c1">
        <col class="c2">
        <colgroup>
            <thead>
                <tr>
                    <th>title1</th><th>title2</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <td>yo1</td><td>yo2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>2</td>
                </tr>
            </tbody>
        </table>

CSS

table .c1 {
    width: 50px;
}
table .c2 {
    width: 100px;
}
table caption {
    text-align: center;
}
table th {
    border: 1px solid #369;
    background: #000;
    color: #fff;
}
table thead td {
    background: blue;
    color: #fff;
    font-size: 20px;
}
table tbody td {
    border: 1px solid #000;
}