JSFiddle - React, Tailwind, and code Playground

by Artjoms Fomenko

HTML

<div class="header">Header</div>

<div id="content">
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe tempore officia neque quasi ipsa impedit porro iure veritatis eius autem delectus qui aliquam excepturi culpa ipsam doloremque numquam asperiores repellendus.</span>
    <span>Quaerat aliquid molestiae quibusdam odio nesciunt deleniti rem. Minima quos tenetur maxime ratione aperiam ut dolorem atque totam error natus eligendi officia nostrum! Laudantium at consequuntur explicabo ipsa laborum qui.</span>
    <span>Ex explicabo veritatis optio rerum tempore ad necessitatibus illum consequatur magni sed sapiente ratione qui voluptate. Unde iure iste fugiat esse nihil ab voluptate. Recusandae accusantium fugit expedita atque ab.</span>
    <span>Repellendus tempora voluptatibus id beatae ipsa odio quasi qui culpa nam enim laborum consequatur quod libero sapiente dignissimos placeat itaque officia magnam nihil laudantium temporibus quo asperiores. Non consectetur earum.</span>
    <span>Delectus ad officiis culpa quia quae nam vero voluptate dolorum enim inventore nemo in assumenda necessitatibus labore iste saepe est incidunt quam dolor consequatur odio sint minima mollitia! Tempore enim.</span></p>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe tempore officia neque quasi ipsa impedit porro iure veritatis eius autem delectus qui aliquam excepturi culpa ipsam doloremque numquam asperiores repellendus.</span>
    <span>Quaerat aliquid molestiae quibusdam odio nesciunt deleniti rem. Minima quos tenetur maxime ratione aperiam ut dolorem atque totam error natus eligendi officia nostrum! Laudantium at consequuntur explicabo ipsa laborum qui.</span>
    <span>Ex explicabo veritatis optio rerum tempore ad necessitatibus illum consequatur magni sed sapiente ratione qui voluptate. Unde iure iste fugiat esse nihil ab voluptate. Recusandae accusantium fugit expedita atque ab.</span>
    <span>Repellendus tempora...

CSS

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

body{
}

.header{
    width: 100%;
    height: 300px;
	padding-top: 30px;
    background-color: gold;
}

#content{
    width: 100%;

    margin-bottom: -100px;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    background-color: yellow;
}

#footer{
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 1;
    background-color: orange;
}