JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
        <button type="button" id="hideText">Hide Big Text</button>
        <button type="button" id="showText">Show Big Text</button>
        <p><div class="bigText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum nisi ut eros imperdiet luctus. Vivamus tempor, elit ac sagittis tristique, nunc metus euismod eros, eu varius mauris tellus sed tortor. Nunc bibendum dapibus magna nec fermentum. Vestibulum vehicula magna at ipsum ultricies, in rutrum nulla rutrum. Proin euismod bibendum arcu vitae aliquet. Nulla nec sapien leo. Nullam elit nisl, ultrices ac lacinia vitae, maximus ut ipsum. Aenean eleifend ex sed dolor suscipit, eget placerat magna viverra. Curabitur tincidunt nulla quis diam luctus, eget euismod sem laoreet. Cras ultricies feugiat lorem id venenatis.

Aliquam et arcu efficitur, venenatis lectus id, vestibulum lacus. Donec maximus nunc sed feugiat gravida. Proin non auctor libero. Aliquam lobortis condimentum sem tempor cursus. Vivamus dictum, nisi id auctor dapibus, sapien lacus congue turpis, sit amet semper lorem nisi quis nisl. Ut egestas, arcu ac euismod euismod, ex mi efficitur metus, ut malesuada magna ante ac eros. Curabitur varius lorem sapien, in tristique erat dapibus ut. Curabitur placerat odio vitae euismod efficitur. Aliquam non lorem a eros mattis laoreet. Ut ut consequat libero. Nunc ultricies nulla metus, at fringilla velit vestibulum faucibus. Donec sit amet ante quis mi tristique tristique. Sed faucibus arcu sit amet metus fermentum, nec scelerisque magna congue. Proin consequat nisi dapibus venenatis hendrerit.

Curabitur rutrum lacus diam. Morbi dictum volutpat sodales. Duis semper ex orci, ut malesuada est sodales vitae. Mauris eu lectus ut ex...

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .text-muted {
  margin: 20px 0;
}

JavaScript

$('.bigText').hide();

$('#hideText').click(function() {
    $('.bigText').hide();
});

$('#showText').click(function() {
    $('.bigText').show();
});