JSFiddle - React, Tailwind, and code Playground

by Arete

HTML

<div id="container">
	<div id="header">
		<!-- Header start -->
		<h1>Header</h1>
		<!-- Header end -->
	</div>
	<div id="content">
		<!-- Body start -->
		<p>Lorem ipsum dolor sit amet, decore propriae pri et. Quo consequat intellegat concludaturque ut, latine admodum in nam, saepe tempor legimus ad mea. Rationibus vituperatoribus quo ei. Ne sonet explicari nec, mel ad elit disputationi, nam nonumes splendide ea. </p> <p> Cu vim sanctus menandri, nonumes commune sapientem sit at. Maiorum principes mea no, ei lorem delicata theophrastus eum. Id quodsi labores antiopam eam. Quidam menandri cotidieque quo te, ceteros quaestio postulant vis no. Et vis veritus fierent. An cum purto utroque maiorum. Eu nisl salutatus conclusionemque quo, ea duo nibh salutatus. </p> <p> Quis eleifend gubergren ad duo, nam tollit aperiri alterum ad, probatus adipisci quaestio pri et. Eos eu maluisset accommodare, ei mazim docendi persecuti nec. Sea porro errem sanctus no, pro exerci deseruisse in. Recusabo argumentum ei pri. Has at veri ocurreret, eum erat ubique no. </p> <p> Illum graece postea ea per. Ei diam interesset eum. Ea cum voluptua petentium. Nec vidit adversarium in, nec erant fabellas dissentiet eu. </p> <p> Persius euripidis mea at, eruditi denique id vim, vim te probo invenire. Putant recteque an pri, his vide malis choro ne. Nec cu partem definiebas, falli phaedrum eum et, nam posse viderer ullamcorper at. No vocent invenire has, graecis insolens singulis cu vim. Democritum vituperata conclusionemque nam id, ut brute accumsan sententiae his. Te has errem munere accommodare. </p> <p> Elit doctus referrentur sed ne, cu mei diam vide necessitatibus. Vel cu lorem inimicus electram, civibus propriae assentior ad pro, pro id eius persius elaboraret. Cu sea invidunt volutpat imperdiet, ut qui assum delicata conceptam. Quo in vide lorem euismod. </p> <p> Inermis erroribus similique nec te, deleniti constituto eu eam. Eam quaeque numquam philosophia id. Id quo illud decore...

CSS

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
.page {

}
.sidebar {

}

#content {
	padding:10px;
	padding-bottom:60px;	/* Height of the footer */
}

#container {
	min-height:100%;
	position:relative;
}
#header {
	background: LightSlateGray;
	padding:10px;
}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:200px;			/* Height of the footer */
	background:#6cf;
}
/* other non-essential CSS */
#header p,
#header h1 {
	margin:0;
	padding:10px 0 0 10px;
}
#footer p {
	margin:0;
	padding:10px;
}