JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
  <div id='container' class='container'>
    <div class='content'>
       <button id='button'>
       SHOW/HIDE
       </button>
    </div>
    
    <div id='absolute-div' class='absolute-div'>
      Hello world
    </div>
  </div>
</body>
</html>

CSS

@keyframes hide {
    from {
        transform: translateY(0);
    }
    
    to { 
        transform: translateY(100%);
    }
}

@keyframes show {

    from {
        transform: translateY(100%);
    }
    
    to { 
        transform: translateY(0);
    }
}

.container {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  height: 80vh;
  width: 40vw;
  margin: 0 auto;
  padding: 1rem;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100%;
  background-color: green;
}

.absolute-div {
  background-color: blue;
  min-height: 20%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom:0;
}

.hidden {
  animation: hide ease forwards 300ms;
}

.shown {
  animation: show ease forwards 300ms;
}

JavaScript

document.getElementById('button').addEventListener('click', () => {
	const absolute = document.getElementById('absolute-div')
  const absoluteClass = absolute.getAttribute('class')
  
  if(absoluteClass.includes('hidden'))
		absolute.setAttribute('class', 'absolute-div shown')
  else
  	absolute.setAttribute('class', 'absolute-div hidden')
})