JSFiddle - React, Tailwind, and code Playground

by Zoxon

HTML

<table class="page">
    <tr><td class="header">header</td></tr>
    <tr>
        <td class="main">
            <table class="inner-wrapper">
                <tr>
                    <td class="sidebar">sidebar</td>
                    <td class="content-wrapper">
                        <table class="content">
                            <tr>
                                <td>&nbsp;</td>
                                <td class="content-middle">content</td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr><td class="footer">footer</td></tr>
</table>

CSS

*{
    margin: 0;
    padding: 0;
}
.clear{
    clear: both;
}
.page{
    width: 100%;
    border: 0;
}
table,
td,
th{
    border: 0;
    border-collapse: collapse;
}
.header{
    height: 48px;
    background: green;
}
.main{
    background: lightblue;
}
.inner-wrapper{
    width: 100%;
}
.sidebar{
    background: gray;
    width: 230px;
}
.content-wrapper{
    padding: 50px 0;
}
.content{
    width: 100%;
}
.content-middle{
    width: 450px;
    background: yellow; 
}
.footer{
    height: 48px;
    background: blue;
}