JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>scroll here:</h1>
<hr class="scrollpos">
<br>
<button class="toggle" type="button">toggle</button>
<div class="box">
  <div class="box-inner">
    <input />
  </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

CSS

.box {
  position: absolute;
  max-width: 200px;
  overflow: hidden;
}

.box-inner {
  padding: 20px;
  min-height: 300px;
  border: 3px solid #000;
  background: #000;
  visibility: hidden;
  transform: translateY(-100%);
  transition: 400ms transform, 400ms visibility;
}

.box-inner.is-visible {
  visibility: visible;
  transform: translateY(0);
}

JavaScript

var button = document.querySelector('.toggle');
var box = document.querySelector('.box-inner');
var input = document.querySelector('input');

button.addEventListener('click', function () {
  box.classList.toggle('is-visible');
});

box.addEventListener('transitionend', function () {
	input.focus();
});