JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

<div class="wrapper">
    <div id="container">
        Floated content that is centered goes right here
    </div>
</div>
<div class="footer">
sticky footer is here, but i want it to display under the floated content in the middle if the browser window is small...
</div>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    position: relative;
}

body{
    min-height: 350px;
    position: relative;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -40px; /* the bottom margin is the negative value of the footer's height */
}
.footer{
    height: 40px; /* .push must be the same height as .footer */
    width: 100%;
    position: absolute;
    bottom:0; left:0;
    background-color: grey;
}
body {
    text-align: center;
    font-family: Arial;
}
#container {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height:250px;
    color: #000000;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -100px;
    position: absolute;
    background-color: yellow;
}