JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<div class="container">
		<section class="pos-container">
            a
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
		</section>
	</div>

	<footer>
		Ich bin ein footer
	</footer>

CSS

body {
    margin: 0;
    padding: 0;
	background-color: grey;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	overflow-y: scroll; 
    
}

.container {
	z-index: 1;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: pink;
	margin-bottom: 6em;
}

.pos-container {
	position: relative;
	width: 80%;
	 min-height: 100%;
	margin: auto; 
	background-color: green;
}

p {
    width: 4em;
}

footer {
	z-index: 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 6em;	
}