JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<div class="container">
      <div class="page-header">
        <h1>Sticky footer</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      <p>Use <a href="../sticky-footer-navbar/">the sticky footer with a fixed navbar</a> if need be, too.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam placeat atque numquam autem magnam similique quam neque error reiciendis reprehenderit consequatur, sunt, tenetur adipisci voluptate aut tempora, odit id perferendis perspiciatis voluptatem nobis non explicabo fugiat! Iste voluptas, deserunt sint quaerat mollitia nobis a excepturi, aut quae cumque cupiditate libero! Repellat nostrum, distinctio nesciunt, autem nam illo temporibus, adipisci ratione, iste voluptatum unde sequi. Expedita placeat nesciunt laudantium rem perspiciatis, sint repudiandae libero quaerat, dolores fuga error obcaecati dicta sunt possimus! Voluptas reprehenderit itaque adipisci commodi in, temporibus consequuntur! Perspiciatis enim, libero, earum optio, ratione nulla hic, deleniti tempore excepturi saepe illum assumenda voluptas a minus. Corporis totam fugiat saepe fuga, labore nesciunt quo asperiores est dolores, hic ut necessitatibus aperiam omnis qui?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam placeat atque numquam autem magnam similique quam neque error reiciendis reprehenderit consequatur, sunt, tenetur adipisci voluptate aut tempora, odit id perferendis perspiciatis voluptatem nobis non explicabo fugiat! Iste voluptas, deserunt sint quaerat mollitia nobis a excepturi, aut quae cumque cupiditate libero! Repellat nostrum, distinctio nesciunt, autem nam illo temporibus, adipisci ratione, iste voluptatum unde sequi. Expedita placeat nesciunt laudantium rem perspiciatis, sint repudiandae libero quaerat, dolores fuga error obcaecati dicta sunt possimus! Voluptas reprehenderit itaque adipisci...

CSS

/* Визуальная часть */
.page-header {
	background-color: lightgreen;
}
.lead {
	background-color: lightblue;
}
.container {
	border: 1px solid red;
}
.text-muted {
	padding: 0;
	margin: 0;
}
body {
	box-sizing: border-box;
	border: 1px solid blue;
	padding: 5px;
	margin: 0;
}
.footer {
	background-color: lightyellow;
	border: 1px solid red;
}

html {
	box-sizing: border-box;
	border: 1px solid green;
	padding: 5px;
	margin: 0;
}

/* Липкий футер */
html {
	position: relative;
	min-height: 100%; /* работает визуально */
}
body {
	margin-bottom: 60px;
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	height: 60px;
}