JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="top">
    <img class="top-img" src="http://www.reunitingall.com/wp-content/uploads/2015/01/Cat-Sun-God-640x388.jpg" />
    <h3>
      Group Cats
    </h3>
  </div>
  <div class="bottom">
    <ul>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
    </ul>
  </div>
</div>
<footer class="footer">
  footer text! Wooohoooo
</footer>

CSS

.container {
  width: 300px;
  height: 100%;
}

.top {
  height: 250px;
}

.top-img {
  width: 200px;
  height: 200px;
}

.bottom {
  overflow: auto;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}