JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header>HEADER</header>
<content>
  <section>
    CONTENT
    <div class="hidden">
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
    </div>
  </section>
  <div>
    <button>toggle content</button>
  </div>
</content>
<footer>FOOTER</footer>
</body>

CSS

body {
  min-height: 100vh;
  margin: 0;
  position: relative;
  padding-bottom: 100px; /* height of the footer */
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  background: yellow;
}

* {
  width: 100%;
  text-align: center;
}

.hidden {
  display: none;
}

JavaScript

$("button").click(function() {
	$("section div").toggleClass("hidden");
});