JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div id="foreground">   
  <header>header</header>
  <nav>nav</nav>
  <aside>aside</aside>
  <section>section</section>
  <footer>footer</footer>
</div>

CSS

* { /* CSS-Reset für die voreingestellten äußeren (margin) & inneren (padding) Abstände */
    margin:0;
    padding:0
}
body {
    font-size:0.95em;
    font-family:Ubuntu;
    background:url('https://unsplash.it/3000/200');
    background-repeat:no-repeat;
    background-position:top;
    background-color:white;
    text-align:center;
    overflow:auto;
    /*overflow-y:hidden;*/ /* Für dieses Demo vertikales Scrollen aktiviert */
}
#foreground {
    max-width:1200px;
    min-width:960px;
    /*margin:0;*/ /* Fehlendes Semikolon ergänzt, aber Regel wegen dem CSS-Reset obsolet, daher auskommentiert  */
    margin-left:auto;
    margin-right:auto
}
header {
    /*margin:0;*/ /* Regel wegen dem CSS-Reset obsolet, daher auskommentiert  */
    background:red;
    height:200px /* entsprechend der Hintergrundbildhöhe */
}
nav {
    float:none; /* anstelle von both gewählt  - falls 'none' zutreffend, kann gänzlich auf die float-Regel verzichtet werden  */
    width:100%;
    background:yellow
}
aside{
    float:left;
    width:200px;
    background:brown;
    min-height:600px
}
section{
    background-color:grey;
    /*margin:0;*/ /* Regel wegen dem CSS-Reset obsolet  */
    min-height:600px
}
footer {
    background:green;
    clear:both
}