JSFiddle - React, Tailwind, and code Playground

by fido3993

HTML

<section>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolorum eius temporibus debitis voluptatibus laboriosam unde, laborum illo architecto et voluptas voluptate possimus, labore, nam quos commodi id harum aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, quam error neque facilis cumque id. Distinctio dolores, laudantium possimus amet nostrum dolorum, inventore quae dicta vel itaque nulla rerum, ipsa.
  </p>
</section>

<footer>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quod incidunt ipsum expedita eos natus pariatur earum explicabo molestias nobis repudiandae delectus, hic praesentium sed perspiciatis maiores, sit debitis vel?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto harum obcaecati magnam quasi inventore earum, atque, cum veritatis nostrum dignissimos esse officia rem est dolorem aspernatur minima facere, velit modi!
  </p>
</footer>

CSS

*{
  padding:0;
  margin:0;
}

html{
  box-sizing:border-box;
}

html,body{
   height: 100%;
}

body{
    position: relative;
    padding-bottom: 15rem;
    min-height: 100%;
}

section {
  position:relative;
  display: block;
  padding:20px;
  background: aqua;
  height: 100vh;
}

footer{
    background-color: orange;
    position: fixed;
    right: 0px;
    bottom: 0px;
    left: 0px;
    color: rgb(255, 255, 255);
    z-index:-1;
    padding: 10px 20px;
}