JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="first"></div>
   <div class="second">
     click me<br>
      click me<br>
      click me<br>
      click me<br>
   </div>
</body>
</html>

CSS

.first{
  width:100%;
  height: 100px;
  background: green;
  position: relative;
  z-index: 2;
}
.second{
  display:flex;
  justify-content:center;
  align-items:center;
  background: #000;
  color:#fff;
  padding: 10px;
  position: relative;
  z-index: 1;
  transition: 1s ease-out;
}
  
.second._up {
    transform: translateY(-100%);
}

JavaScript

$('.second').click(function(){
	$(this).show().delay(600).addClass('_up');
});