JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
        <div id="header-banner">
            HeaderBanner image will reside here
        </div>
        <div id='cssmenu'>
            <ul>


<li class='active'>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            </ul>
        </div>
    </div>
    <div id="body">
        <div id="body-main-left">Left Block</div>
        <div id="body-main-right">Right Block</div>
        <div id="body-main-center">@RenderBody()
            <p> Some content here </p>
            asfasf
            asdf
            asdf
            asdf
        </div>
    </div>
    <div id="footer">
        Footer copyright
    </div>
</div>

CSS

#body {
    background-color:white;
    display: flex;
    flex-grow: 1;
}

#body-main-left { 
    background-color:rgba(100, 100, 100, 0.1);
    width: 150px;
}

#body-main-right {
    background-color: rgba(100, 100, 100, 0.1);
    width: 150px;
    order: 2;
 
}

#body-main-center {
    flex-grow: 1;
}
#footer {
    background-color: black;
    color: red;
}