JSFiddle - React, Tailwind, and code Playground

HTML

<body>
       <div class="container_24">
           <div class="wrapper">
            <div class="grid_16">
                <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
            </div>
           </div>
       </div>
       <div class="container_16">
           <div class="wrapper">
            <form id="form1" runat="server">
                Adding some content
            </form>
           </div>
       </div>
       <div class="container_24 footer">
            <div class="wrapper">Footer</div>
       </div>
</body>

CSS

html, body {
    height:100%;
    margin: 0;
}

.wrapper{
  /* Set up proportionate scaling */
  width: 960px;
  margin: 0 auto;
  
}
.grid_16 {
    text-align: center;
}
.container_16 {
    width: 100%;
    height: 100%;
}
.container_16 .wrapper {
     background-image:url(../images/Content_bkg.gif);
     box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    height: 100%;
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    background-color: green;
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 1px solid rgb(71, 89, 32);
    box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    position:relative;
    width:100%;
}
.container_24.footer {
    bottom: 0;
    position: fixed;
    z-index: 3;
}