JSFiddle - React, Tailwind, and code Playground
HTML
<header>
HEADER
</header>
<aside>
SIDEBAR
</aside>
<main>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero eum, deserunt non ea quibusdam voluptatem atque dolorum doloribus corporis delectus rem, quae, tenetur, eos hic architecto voluptate minima odio!</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero eum, deserunt non ea quibusdam voluptatem atque dolorum doloribus corporis delectus rem, quae, tenetur, eos hic architecto voluptate minima odio!</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero eum, deserunt non ea quibusdam voluptatem atque dolorum doloribus corporis delectus rem, quae, tenetur, eos hic architecto voluptate minima odio!</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero eum, deserunt non ea quibusdam voluptatem atque dolorum doloribus corporis delectus rem, quae, tenetur, eos hic architecto voluptate minima odio!</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero eum, deserunt non ea quibusdam voluptatem atque dolorum doloribus corporis delectus rem, quae, tenetur, eos hic architecto voluptate minima odio!</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero eum, deserunt non ea quibusdam voluptatem atque dolorum doloribus corporis delectus rem, quae, tenetur, eos hic architecto voluptate minima odio!</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero eum, deserunt non ea quibusdam voluptatem atque dolorum doloribus corporis delectus rem, quae, tenetur, eos hic architecto voluptate minima odio!</p>
</main>
CSS
@import url('https://fonts.googleapis.com/css?family=Overpass');
body {
font-family: 'Overpass', sans-serif;
margin: auto;
}
p {
font-size: calc(14/16 * 100%);
}
header {
width: 100%;
height: 100px;
background-color: white;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
border-bottom: 3px solid black;
}
aside {
width: 200px;
background-color: white;
height: calc(100% - 100px);
box-sizing: border-box;
border-left: 1px solid black;
position: fixed;
right: 0;
top: 100px;
}
main {
padding-top: 100px;
padding-right: 200px;
}
}