JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<div class = "footer1 ban norep">
</div>
<div class="footerWrap">
    <div class="footer">
      <div class="footerContent">
        <div class = "foot4 f4-pos im3 norep" ></div>
      </div>     
    </div>
</div>

CSS

.f4-pos
{
  position: absolute;
  background-position:center bottom;
}
.footer1
{
  background-image: url("http://pre09.deviantart.net/49b5/th/pre/i/2015/160/1/9/skies__backround_practice__by_darklatias61-d8wm1wr.png");
}
.foot4
{
  text-align: center;
  position:fixed;
    bottom:0;
    width: 100%;
    height:50px;
    background-image: url("http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/watercolor-grunge-000100-glossy-rust.jpg");
    background-size:100%;
    
}
.ban
{
  height: 800px;
  background-size:100% 100%;
}
.im3
{
  height: 100px;
  width : 300px;
}
.norep
{
  background-repeat: no-repeat;
}
.footerWrap {
    width:100%;
    position:fixed;
    bottom: 0px;
}
.footer {
    width:400px;
    margin:auto;
}
.footerContent {
    float:left;
    width:100%;
    padding:20px 0;
}
.footer p {float:left; width:100%; text-align:center; }