JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="header-inner">
        <table class="content" width="400px">
            <tr>
                <td colspan="3" id="td-logo">banner</td>
            </tr>
            <tr>
                <td colspan="3" id="td-menu">menu</td>
            </tr>
            <tr>
                <td class="td-main" id="td-L" valign="top" width="80px">text1</td>
                <td class="td-main" id="td-C" valign="top" width="300px">text2</td>
                <td class="td-main" id="td-R" width="340px">text3</td>
            </tr>
            <tr>
                <td id="td-footer" colspan="3">footer</td>
            </tr>
        </table>
    </div>
    <!-- header-inner -->
</div>
<!-- header -->

CSS

body {
    font-size: 13px;
    margin: 0px auto;
    font-family:"Arial", sans-serif;
}
table {
    border: 1px solid #D7E4B9;
    background: #B4CDCD;
}
#td-logo {
    border: 1px solid #D7E4B9;
    height: 40px;
}
.content {
    padding: 2px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    box-shadow: 2px 2px 2px 0px #C0C0C0;
}
#td-menu {
    border: 1px solid #D7E4B9;
    height: 30px;
}
.td-main {
    border-right: 1px solid #D7E4B9;
    padding: 0px 0px 100px 0px;
}
#td-L {
}
#td-R {
}
#td-C {
}
#td-footer {
    height: 30px;
    border: 1px solid #DCDCDC;
    color: #1A1A1A;
}