JSFiddle - React, Tailwind, and code Playground

by Alexey Mishin

HTML

<button id="pop_up_btn"></button>
<div class="pop_up closed">
  
</div>

CSS

body {
  background-color: lightgrey;
}

#pop_up_btn {
  width: 50px;
  height: 50px;
  border: none;
  background-color: black;
}

.pop_up {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: red;
  animation: slide_down ease-out 0.4s;
}

.closed {
  display: none;
}

@keyframes slide_down{
  0% {transform: translate(0, -600px); opacity: 0}
  80% {transform: translate(0, 50px)}
  100% {transform: translate(0, 0); opacity: 1}
}

JavaScript

var pop_up_btn = document.getElementById('pop_up_btn');

pop_up_btn.onclick = function(e) {
	document.getElementsByClassName('pop_up')[0].classList.toggle('closed');
}