JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="content">
            <h1>The Perfect Sticky Footer</h1>
             <ul>
                <li>It sticks to the bottom of any window, especially when there isn't enough content to fill the screen!</li>
                <li>It doesn't overlap content! Unlike most fixed and absolutely positioned footers, this one stops at the bottom of the content & the scroll bar kicks in!</li>
                <li>It's purely HTML & CSS, no javascript required!</li>
                <li>It should work in all browsers, but don't quote me on that I haven't been able to test it in IE yet!</li>
                <li>Try resizing this window!</li>
            </ul>
            <ul>
                <li>It sticks to the bottom of any window, especially when there isn't enough content to fill the screen!</li>
                <li>It doesn't overlap content! Unlike most fixed and absolutely positioned footers, this one stops at the bottom of the content & the scroll bar kicks in!</li>
                <li>It's purely HTML & CSS, no javascript required!</li>
                <li>It should work in all browsers, but don't quote me on that I haven't been able to test it in IE yet!</li>
                <li>Try resizing this window!</li>
            </ul>
        </div>
        <div id="footer">
        </div>
    </div>
</body>

CSS

/****************************************
 IMPORTANT!
*****************************************
 Normalize or reset your CSS first!
 If you are getting weird or awkward 
 spaces it could be because you forgot
 to define the margin or padding on an 
 element and the browser is using its
 default margin & padding settings. Try
 unchecking Normalized CSS under Fiddle
 Options and RUN fiddle again to see
 what I'm talking about. I intentionally
 didn't reset the margin on the h1 and p
 elements for this very reason.

 Also, in order for this to work correctly
 you need to stick to this code. Don't
 change anything unless it is noted that
 you may do so. You may change the div ids
 but remember to change them both in the
 HTML & CSS. If you do change the div ids 
 I would recommend using HTML 5 tags
 wherever possible. For example, use
 <footer> instead of <div id="footer">. 
 I chose not to do that in the fiddle to
 avoid confusion and keep it consistent.
****************************************/
body {
 	margin: 0;
 	padding: 0;
 	height: 100%;
}
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
* html #wrapper {
    height:100%; 
}
#wrapper {
    min-height: 100%;
    position: relative;
}
#content {
    padding-bottom: 30px; /* ATTENTION! padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer {
    position: fixed;
    width: 100%;
	clear: both;
    bottom: 0;
	padding: 0;
    margin: 0;
    /* ATTENTION! The following elements below 
    can be set to whatever your heart desires */
    height: 30px; /* REMEMBER height = padding-bottom */
    background: #333;
}



/****************************************
 ATTENTION!
*****************************************
 The following code below is just to make
 the fiddle look pretty. It isn't necessary
 and can be deleted or editted. 
****************************************/
h1 { 
    background: #333;
    padding: 20px;
    font-size: 3em;
   ...