JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="create-login-button" role="button">

<div id="create-login-group" class="hidden hideMe">
  Some text is here
</div>
<div>
  more content
</div>

CSS

.hideMe {
  opacity: 0;
}

.hidden {
  display: none;
}

#create-login-group {
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

JavaScript

var lGroupEle = $('#create-login-group');
$("#create-login-button").change(function() {
  if ($(lGroupEle).hasClass("hidden")) {
    $(lGroupEle).toggleClass("hidden");
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad");
  } else {
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad", function() {
     $(lGroupEle).toggleClass("hidden");
    });
  }
});