JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>  
        <div class="messages">
    		<ol>
                    <li>Message One</li>
                    <li>Message Two</li>
                    <li>Message Three</li>
                </ol>
                <div class="messages-push"></div>
            <form action="#">
                <fieldset>
                    <input type="text"></input>
                    <button type="submit">Send</button>
                </fieldset>
            </form><br />
        </div>
    </body>

CSS

*              {
                   margin: 0
               }
html,
body           {
                   height: 100%
               }
.wrapper       {
                   height: auto !important;
                   height: 100%;
                   margin: 0 auto -10em;
                   min-height: 100%;
               }
.push          {
                   height: 10em;
               }

}
form {
    background-color: green;
    height: 40px;
}