JSFiddle - React, Tailwind, and code Playground

by for3v3rforgott3n

HTML

<table class="table">
    <tbody>
        <tr>
            <td class="one">ABC</td>
            <td class="two">DEF</td>
            <td class="three">GHI</td>
            <td class="four">JKL</td>
            <td class="five">MNO</td>
            <td class="six">PQR</td>
        </tr>
        <tr>
            <td class="one">ABC</td>
            <td class="two">DEF</td>
            <td class="three">GHI</td>
            <td class="four">JKL</td>
            <td class="five">MNO</td>
            <td class="six">PQR</td>
        </tr>
        <tr>
            <td class="one">ABC</td>
            <td class="two">DEF</td>
            <td class="three">GHI</td>
            <td class="four">JKL</td>
            <td class="five">MNO</td>
            <td class="six">PQR</td>
        </tr>
    </tbody>
</table>

CSS

.table {
    width: 698px;
}
.one {
    min-width: 46px;
    background-color: red;
}
.two {
    width: 100%;
    background-color: green;
}
.three {
    width: 110px;
    background-color: orange;
}
.four {
    min-width: 96px;
    background-color: blue;
}
.five {
    width: 41px;
    background-color: pink;
}
.six {
    min-width: 31px;
    background-color: teal;
}