JSFiddle - React, Tailwind, and code Playground

HTML

<button id="_b">
  animate
</button>
<input type='text' class='bonus' id="_div" />

CSS

body {
  display: flex;
  flex-direction: column;
}
div {
  width: 200px;
  height: 200px;
  background: red;
}

.bonus {
  opacity: 0;
  height: 0px;
  transform: translate3d(0, -20%, 0);
  transition: all 0.5s ease-out;
}

.active {
  opacity: 1;
  height: 200px;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s ease-out;
}

JavaScript

_b.onclick = () => {
  _div.classList.toggle('active')
}