JSFiddle - React, Tailwind, and code Playground

by El Khal

HTML

<div class="container">
     <h1>Hello, world!</h1>

    <div class="row">
        <table class="span12">
            <thead>
                <tr>
                    <th>A</th>
                    <th>B</th>
                    <th>C</th>
                    <th>D</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <tr>
            </tbody>
        </table>
    </div>
    <div class="row">
        <table class="span12">
            <thead>
                <tr>
                    <th>Longer Table</th>
                    <th>Headers In</th>
                    <th>This</th>
                    <th>Table</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <tr>
            </tbody>
        </table>
    </div>
</div>

CSS

td, th {
    width: 25%;
}
table {
    background-color: yellow;
    // width:100%
}
tr {
    background-color: gray;
}
th {
    background-color: aqua;
}
td:nth-child(1) {
    background-color: red;
}
td:nth-child(2) {
    background-color: green;
}
td:nth-child(3) {
    background-color: blue;
}
td:nth-child(4) {
    background-color: purple;
}