JSFiddle - React, Tailwind, and code Playground

by Alex Sol

HTML

<div id="block"></div>

CSS

#block {
  width: 100px;
  height: 500px;
  background: #BBFFBB;
  border: 2px solid #333;
  position: relative;
  bottom: 0;
  left: 0;
  cursor: pointer;
  
  transform: translateY(calc(-100% + 50px));
  transition: all 1s ease;
}

#block.showblock {
  transform: translateY(0);
}

JavaScript

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

    block.addEventListener('click', function() {
    		block.classList.toggle('showblock');
    });