JSFiddle - React, Tailwind, and code Playground

by grcote7

HTML

<div class="container">
  <header>
    TON HEADER
  </header>
  
  <div class="content">
    <button id="toggleBlock">TOGGLE</button>
    <div id="block" style="display: none;">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia blanditiis dolor possimus, itaque esse non dolorem facilis similique sint, veniam, vel praesentium eius ipsa, aut dolore velit! Minima, odit fuga.</div>
      <div>Perspiciatis repellendus amet eveniet ratione repudiandae commodi, tenetur temporibus sunt nesciunt officia possimus labore obcaecati modi. Ipsa magnam quibusdam, minus non voluptate illum, maxime, recusandae dolorem atque dolore velit suscipit.</div>
      <div>Sed voluptatem vel, atque dignissimos rem nulla quae accusantium deleniti assumenda sequi, pariatur quod sit similique nihil dolores nam architecto non aliquid suscipit vitae ex provident est esse consequatur id!</div>
      <div>A, mollitia obcaecati. Maxime ipsa quaerat dolore similique magnam, necessitatibus totam consequatur, earum illo ducimus, voluptas cupiditate expedita dignissimos quo officia ex. Ducimus perspiciatis beatae perferendis rerum incidunt natus nihil.</div>
      <div>Porro, laudantium maxime voluptatibus saepe laboriosam necessitatibus, ex quisquam vitae consequatur officia amet assumenda repellat. Consectetur quis iure voluptatibus provident et obcaecati vero, modi a eligendi earum maxime aspernatur accusantium!</div>
      <div>Ipsum, facere, quas. Ea autem dolorum voluptas distinctio iste consequuntur officiis eum perspiciatis, reprehenderit similique, consequatur illum? Minus architecto earum autem, nostrum numquam! Eum minima a excepturi doloremque magni quae.</div>
      <div>Veritatis enim aliquid laborum libero maxime doloremque quidem ea ipsam esse, praesentium dolore, pariatur sint dolor quo dolores ipsum quisquam, sed tenetur animi vero rerum provident sequi. Rerum natus, distinctio.</div>
      <div>Dolores aut neque harum eaque, ea hic alias temporibus ab...

CSS

*, *::before, *::after {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  
  min-height: 100vh;
}

.container header, .container footer {
  background-color: #e3e3e3;
  padding: 10px;
}

.container .content {
  flex: 1;
}

footer {
  bottom:0;
  position:fixed;
}

JavaScript

const toggleBlock = document.getElementById('toggleBlock')
const block = document.getElementById('block')

toggleBlock.addEventListener('click', () => {
	if (block.style.display === 'none') {
  	block.style.display = null
  } else {
  	block.style.display = 'none'
  }
})