JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>First Cell</div>
        <div class='cell'>
            <div class='innertable'>
                <div class='row'>
                    <div class='cell'>sub-table 1 row 1 cell 1</div>
                    <div class='cell'>sub-table 1 row 1 cell 2</div>
                </div>
                <div class='row'>
                    <div class='cell'>sub-table 1 row 2 cell 1</div>
                    <div class='cell'>sub-table 1 row 2 cell 2</div>
                </div>
                <div class='row'>
                    <div class='cell'>sub-table 1 row 3 cell 1</div>
                    <div class='cell'>sub-table 1 row 3 cell 2</div>
                </div>
            </div>
        </div>
        <div class='cell'>Second Cell</div>
    </div>
    <div class='row'>
        <div class='cell'>
            <div class='innertable'>
                <div class='row'>
                    <div class='cell'>sub-table 2 row 1 cell 1</div>
                    <div class='cell'>sub-table 2 row 1 cell 2</div>
                </div>
                <div class='row'>
                    <div class='cell'>sub-table 2 row 2 cell 1</div>
                    <div class='cell'>sub-table 2 row 2 cell 2</div>
                </div>
                <div class='row'>
                    <div class='cell'>sub-table 2 row 3 cell 1</div>
                    <div class='cell'>sub-table 2 row 3 cell 2</div>
                </div>
            </div>
        </div>
        <div class='cell'>Third Cell</div>
        <div class='cell'>Fourth Cell</div>
    </div>
    <div class="row">
        <div class='cell'>
            <div class='innertable'>
                <div class='row'>
                    <div class='cell'>sub-table 3 row 1 cell 1</div>
                    <div class='cell'>sub-table 3 row 1 cell 2</div>
                </div>
                <div class='row'>
                    <div class='cell'>sub-table 3 row 2...

CSS

div.table, div.innertable {
    display: table;
    border: thin solid red;
    margin: 0px auto;
}
div.innertable .cell {
    padding: 10px;
}
div.row {
    display: table-row;
}
div.cell {
    display: table-cell;
    border: thin solid black;
}