JSFiddle - React, Tailwind, and code Playground
by rohanbhangui
HTML
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nemo accusantium obcaecati consectetur. Eaque nihil fugiat nesciunt veniam accusantium obcaecati error facilis dolores ipsa eveniet! Officia nihil aspernatur esse officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta consequatur debitis quo culpa quod architecto sint similique incidunt illum officia id quis eligendi voluptatem accusamus aut rem veniam consectetur nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nemo accusantium obcaecati consectetur. Eaque nihil fugiat nesciunt veniam accusantium obcaecati error facilis dolores ipsa eveniet! Officia nihil aspernatur esse officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta consequatur debitis quo culpa quod architecto sint similique incidunt illum officia id quis eligendi voluptatem accusamus aut rem veniam consectetur nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nemo accusantium obcaecati consectetur. Eaque nihil fugiat nesciunt veniam accusantium obcaecati error facilis dolores ipsa eveniet! Officia nihil aspernatur esse officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta consequatur debitis quo culpa quod architecto sint similique incidunt illum officia id quis eligendi voluptatem accusamus aut rem veniam consectetur nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nemo accusantium obcaecati consectetur. Eaque nihil fugiat nesciunt veniam accusantium obcaecati error facilis dolores ipsa eveniet! Officia nihil aspernatur esse officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta consequatur debitis quo culpa quod architecto sint similique incidunt illum officia id quis eligendi voluptatem accusamus aut rem veniam consectetur...
CSS
* {
padding: 0;
margin: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
background-color: #eeeeee;
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 40px;
background: red;
position: absolute;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
li {
display: inline-block;
}
#content {
position: absolute;
width: 100%;
bottom: 40px;
top: 40px;
overflow: auto;
padding: 40px;
}