JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<nav class="nav">
<ul>
<li><a href="">Et link</a></li>
<li><a href="">Et link</a></li>
<li><a href="">Et link</a></li>
</ul>
</nav>
<div class="main">
<section class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum libero vel nulla laoreet, eget condimentum augue pharetra. Phasellus pellentesque interdum nisl non consectetur. Etiam id augue lacus. Cras aliquam blandit magna, in lacinia turpis dignissim sit amet. Nulla facilisi. Duis pharetra velit eget semper mollis. Proin eu aliquam diam. Integer volutpat scelerisque dolor ac ultricies. Quisque pretium luctus eleifend. </section>
<footer>
Her er en footer - kan evt. centreres med CSS
</footer>
</div>
</div>
CSS
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
margin: 0 auto;
width: 80%;
background-color: #eee;
overflow:hidden;
}
.nav {
float:left;
width: 20%;
background-color: grey;
}
.main {
width:80%;
float:right;
background-color: red;
}
footer {
background-color: yellow;
}