JSFiddle - React, Tailwind, and code Playground

by Ratan Paul

HTML

<body>
<div id="fixedheader">Top div content</div>
 
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
    
    
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
    
    
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
    
    
    
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
    
    
    
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
    
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
    
    
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
    
    
    <h1>Page Heading</h1>
<p>Content placeholder ...</p>
 
<div id="fixedfooter">Bottom div content</div>
</body>

CSS

body {
	background-color: #CCC;
	margin:80px 80px 100px 100px;
}
div#fixedheader {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#333;
	padding:20px;
}
div#fixedfooter {
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#333;
	padding:8px;
}