JSFiddle - React, Tailwind, and code Playground

by ArsenyDP

HTML

<div class="block">
</div>
<div class="button">click me</div>

CSS

.button {
  width: 98px;
  cursor: pointer;
  text-align: center;
  border: 1px solid;
}
.block {
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 1;
  transition:
    opacity 0.5s ease-in 0.5s,
    width 0.5s ease,
    height 0.5s ease;
}
.hidden {
  opacity: 0;
  width: 0;
  height: 0;
  transition:
    opacity 0.5s ease-out,
    width 0.5s ease 0.5s,
    height 0.5s ease 0.5s;
}

JavaScript

$ (function () {
	$( 'div.button' ).click(() => $( 'div.block' ).toggleClass( 'hidden' ))
});