JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0" style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
    
    <tr>
        <!-- ============ HEADER SECTION ============== -->
        <td colspan="2" style="height: 100px;" bgcolor="#777d6a">
             <h1>Website Logo</h1>
        </td>
    </tr>

    <tr>
        <!-- ============ LEFT COLUMN (MENU) ============== -->
        <td width="20%" valign="top" bgcolor="#999f8e">
            <a href="#">Menu link</a><br>
            <a href="#">Menu link</a><br>
            <a href="#">Menu link</a><br>
            <a href="#">Menu link</a><br>
            <a href="#">Menu link</a>
        </td>

        <!-- ============ RIGHT COLUMN (CONTENT) ============== -->
        <td width="80%" valign="top" bgcolor="#d2d8c7">        
            <h2>Page heading</h2>
            Here's a two column layout with a header section that spans the width of both columns. The first table row creates the header and contains a single table cell which uses the colspan="2" attribute-value pair. The website logo typically goes in the header section.<br>
            <br>
            The second table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1".
        </td>
    </tr>
    <tr>
        <td colspan="2" style="height: 100px;" bgcolor="#777d6a">
            <h1>Footer</h1>
        </td>
    </tr>
    
</table>

CSS

h1 {
    background: none repeat scroll 0 0 transparent;
    color: #002F17;
    float: left;
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
}
h2 {    
    font-size: 20px;
    font-weight: bold;
    
}