JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block1" class="block">
  This is block 1
</div>
<div id="block2" class="block">
  This is block 2
</div>
<div id="block3" class="block">
  This is block 3
</div>

<button type="button" onclick="removeBlock('block2');">
  Remove block 2
</button>

CSS

.block {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  margin: 20px 20px 0;
  max-height: 500px;
  transition: opacity 0s 0s, margin .25s 0s, max-height .25s 0s;
}

.removedBlock {
  box-sizing: border-box;
  opacity: 0;
  margin: 0;
  max-height: 0;
}

JavaScript

function removeBlock(id) {
  var block = document.getElementById(id);
  block.classList.add('removedBlock');
}