JSFiddle - React, Tailwind, and code Playground

HTML

<!--  Container    -->
<div class="Container">
    <!--  TopMenu Bar    -->
    <div class="colorBar">

    </div>
    <!--  TopMenu Bar   -->
    <!--  Middle Part    -->
    <div class="MiddleWrapper">
        <!--  Left Title    -->
            <div class="Title">
        
            </div>
        <!--   Left Title   -->
        <!--   Large Image   -->
            <div class="ImageLeftWrapper">
        
            </div>
        <!--   Large Image   -->
        <!--  Logo Wrapper    -->
            <div class="LogoWrapper">
        
            </div>
        <!--   Logo Wrapper   -->
        <!--   Page Text Area  -->
            <div class="PageText">
            
            </div>
        <!--   Page Text Area   -->
        <!--  Search Bar    -->
            <div class="SearchBar">

            </div>
        <!--   Search Bar    -->
        <!--   Banner Images -->
            <div class="BannerImageWrapper">
        
            </div>
        <!--  Banner Images   -->
    </div>
    <!--  Middle Part    -->
    <!--   Menu Wrapper    -->
    <div class="MenuWrapper">

    </div>
    <!--   Menu Wrapper    -->
    <!--   Footer Section  -->
    <div class="FooterWrapper">
            
    </div>
    <!--  Footer Section  -->
</div>
<!--  Container   -->

CSS

html, body {
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
            border: 1;
            background-color:Aqua;
        }
        .Container {
            width: 100%;
            height: 100%;
            border: solid 1px red;
            margin: 0 auto;
            padding: 0 1em;
            font: 12px/1.5 Verdana;

        }