JSFiddle - React, Tailwind, and code Playground

HTML

<div id="interaction-box">
  <button id="toggle-button">
    Toggle Drawer
  </button>
  <br />
  Text 1
  <br />
  Text 2
  <br />
  Text 3
  <br />
  Text 4
  <br />
  Text 5
  <br />
  Text 6
  <br />
  Text 7
  <br />
  Text 8
  <br />
  Text 9
  <div id="drawer" class="drawer-closed">
    <button>
      Button Inside Drawer!
    </button>
  </div>
</div>

CSS

#interaction-box {
  width: 80%;
  height: 200px;
  margin: auto;
  background-color: cyan;
  position: relative;
  overflow: hidden;
}

#drawer {
  position: absolute;
  bottom: 0;
  background-color: red;
  width: 100%;
  height: 50%;
  
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.drawer-closed {
  transform: translateY(100%);
  visibility: hidden;
  transition: visibility 0ms 500ms, transform 500ms ease-in-out;
}

.drawer-open {
  transition: transform 500ms ease-in-out;
}

JavaScript

const toggle = () => {
	const drawer = document.querySelector('#drawer')
  drawer.classList.toggle('drawer-open')
  drawer.classList.toggle('drawer-closed')
}

const toggleButton = document.querySelector('#toggle-button')
toggleButton.addEventListener('click', toggle)