JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="page-wrapper">
        <div id="header-wrapper">
            <!--Fixed size header, 180px-->
        </div>
        <div id="content-wrapper"> <!-- Wrapper for the content, this bit should fill the rest of the view port unless content is larger than the view port, to which this div then wraps... -->
            <div id="content-banner"> <!-- A scrolling image banner with photos -->
            </div>
            <div id="content"> <!-- The actual content of the page -->
                Some Mock content
            </div>
        </div>
    </div>
</body>

CSS

html, body {
    height: 100%; 
    color:black;
    margin: 0;
}

body {
    background:black;
    margin:0px;
}

#page-wrapper {
    background:blue;
    display:block;
    margin-top:0px;
    width:900px;
    position:absolute;
    left:50%;
    margin-left:-450px;
    height:100%;
    border:thin solid black;
}

#header-wrapper {
    background:green;
    display:block;
    margin-top:0px;
    width:900px;
    height:180px;
    border-bottom-left-radius:75px;
    box-shadow:0 0 10px #000;
}

#content-wrapper {
    background:white;
    display:inline-block;
    position:relative;
    top:25px;
    width:900px;
    border-top-right-radius:75px;
    overflow:scroll-y;
    box-shadow:0 0 10px #000;
    margin-bottom:-125px;
}

#content-banner {
    background:red;
    display:inline-block;
    position:relative;
    margin:10px 10px 0 10px;
    width:880px;
    height:160px;
    border-top-right-radius:65px;
    overflow:hidden;
}

#content-banner img {
    border-top-right-radius:65px;
    width:880px;
    height:160px;
}

#menu-wrapper {
    background:green;
    display:inline-block;
    position:relative;
    width: 200px;
    margin-left:10px;
}

#content {
    display:inline-block;
    position:relative;
    margin-top:10px;
    line-height:30px;
    vertical-align:top;
}