JSFiddle - React, Tailwind, and code Playground

by _abl

HTML

<h2>Title</h2>
<table style="width:300px">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
<hr>
    <div style="width:300px;">
        <h2>Title</h2>
        <table style="width:100%;">
            <thead>
                <tr>
                    <th>A</th>
                    <th>B</th>
                    <th>C</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </div>

CSS

tr, h2 {
    text-align:center;
}

table {
    background-color: #FFFFCC;
}

h2 {
    background-color: #FFCCFF;
}
div {
    border : 1px solid lightgray;
}