JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<style>
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background:red;
    
}
#wrapper {
    display: flex;
    flex-direction: column;
  
    height: 100%;
    min-height: 100%;
}
header { 
background-color: deepskyblue;
 margin-bottom:6px;
}
#mehrspaltig {
 margin-top:6px;
   flex: 1; 
   display: flex; 
   
   flex-direction: row; }
    nav { 
    background-color: darkgray;  
  
    }
    article { 
    background-color: orange; 
   margin-right:6px;
    flex: 5;
    }
    aside { 
    background-color: gray; 
   
    flex: 1;}
footer { 

margin-top:6px;
display:flex;
 
 justify-content:space-between;
 

}
#foot_left{
  background:green;
 justify-content:space-around;
  flex:5;
}
#foot_right{
  background:green;
 flex:1;
 justify-content:space-around;
}



</style>
<div id="wrapper">
    <header>Kopfzeile</header>
          <nav >Navigation</nav>
    <div id="mehrspaltig">

        <article>Inhalt</article>
        <aside>Zusatz</aside>
    </div>
<footer>
    <div id="foot_left">links</div>
    <div id="foot_right">rechts</div>
    </footer>
</div>