JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="content">
    I'm your content
</div>

<br>
<button class="toggleContent">Click me!</button>

CSS

#content {
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    opacity: 1;
}

#content.cortinaOut {
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    opacity: 0;
}

JavaScript

$(".toggleContent").click(function () {
  $("#content").addClass("cortinaOut");
  setTimeout(function () {
      $("#content").removeClass("cortinaOut");
  }, 500);
});