JSFiddle - React, Tailwind, and code Playground

by MD RAHMAN

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Great Footer</title>
</head>
<body>
<div id="container">
  <div id="content">
    <h1 class="hdr">Great Footer</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales eu nisl eget consequat. Maecenas hendrerit ornare mi, sed eleifend quam accumsan id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum erat eget porttitor ullamcorper. Vestibulum viverra gravida mattis. Phasellus et pellentesque ligula. Duis est magna, laoreet et dolor sit amet, porttitor placerat eros. Aenean quis nunc ligula. Suspendisse nec nunc vel neque feugiat tempor non sed odio.</p>
    <p>Proin mauris tortor, posuere non dolor non, consectetur viverra nisl. Sed condimentum sit amet odio vel fringilla. Morbi et mauris nec leo feugiat auctor id eu magna. Pellentesque magna mi, interdum id dapibus eu, dignissim ac enim. Quisque urna nisi, facilisis vel tortor sit amet, ullamcorper varius risus. Donec sodales neque mi, a suscipit tortor feugiat ultricies. Duis vel pharetra magna, ut viverra diam. Etiam tempor libero eu turpis pharetra sodales. Suspendisse non bibendum purus.</p>
    <p>Aenean sit amet purus risus. In varius, nunc sed porta varius, enim massa congue libero, ut malesuada eros augue in dui. Maecenas lacus metus, auctor quis consequat at, ultricies ut risus. Pellentesque quis interdum tortor. Nunc placerat leo in semper volutpat. Aliquam turpis enim, consectetur sed sagittis in, imperdiet pellentesque dolor. Etiam quis quam sollicitudin, pellentesque sapien blandit, condimentum massa. Pellentesque imperdiet volutpat risus, non dignissim leo sagittis eu. Phasellus ultricies sodales magna ac ultricies.</p>
    <p>Morbi elementum massa id urna viverra, ac laoreet est rhoncus. Sed risus...

CSS

* {
	margin: 0;
	padding: 0;
}
body, html {
	height: 100%;
	background: #ccc;
}
#container {
	background: #FFFFFF; /* styling only */
	width: 700px;
	margin: 0 auto;
	position: relative;
	height: auto !important;
	min-height: 100%;
	height: 100%;
}
#content {
	padding-bottom: 100px;
}
#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100px;
	width: 100%;
	background: #999;
}
p, h1 {
	padding: 10px;
}