JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<!--Фиксированный с широкими строками-->
<table id="layout">
    <tr class="contentrow">
        <td><td colspan="3" class="content logo">LOGO<td>
    <tr id="head">
        <td><td colspan="3">qwerqw<td>
    <tr class="contentrow">
        <td><td rowspan="3" id="vmenu">Меню
        <td class="content">Новости
        <td rowspan="2" class="banners">Банеры1
        <td>
    <tr class="contentrow">
        <td><td class="content">Продукты<td>
    <tr class="contentrow">
        <td><td class="content">Акции<td class="banners">Банеры2<td>
    <tr id="foot">
        <td><td colspan="3">qwerqw<td>
    <tr class="contentrow">
        <td><td colspan="3" class="content">&copy;<td>
</table>

CSS

table,td,th{
    //border: 1px solid black;
    
}
body{
    background-color: #777;
}

#layout{
    margin: 0 auto;
    width: 100%;
}

#head,#foot{
    background-color: #000;
    color: #fff;
}
#vmenu, .banners, .content{
    background-color: #fff;
    color: #000;
}

#head{
    
}
.contentrow{
    vertical-align:top;
}
#foot{
    
}

#vmenu{
    width: 55px;    
}
.banners{
    width: 140px;    
}
.content{
    width: 210px; //=400-50-140
}