JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrap">
        <div id="main">
            <h1>Ололо:</h1>
            <p>Трололо</p>
        </div>
    </div>
	<div id="footer">
		<p class="footer_text">&copy; <i>кекеке</i></p>
	</div>
</body>

CSS

* {margin:0;padding:0;} 
#wrap {min-height: 100%;}
html, body {height: 100%;}

h1, p
{
	margin: 0 0 0 0;
}

p
{
	padding: 0 0 0 20px;
}

h1
{
	color: #666;
	font-size: x-large;
}

html
{
	background: #666;
}

#main
{
	/*margin: 10px auto 50px;*/ /*надо так*/
    margin: 0px auto 0px; /*а работает только так :(*/
	width: 80%;
	color: black;
	background: #f0f0f0;
    
    overflow:auto;
	padding-bottom: 19px;

}

#footer
{
	/*padding: 10px 0 10px 0;*/ /*позарес надо эту строчку, но с ней не работает :(*/
	margin: 10px 0 0 0;
	background: #39b54a;
	color: #fff;
	width: 100%;
	text-align: right;
    
    position: relative;
	margin-top: -19px;
	height: 19px;
	clear:both;
}

.footer_text
{
	padding:0 10px 0 0;
}