JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<div class="tab" id="tab01">one</div>
<div class="tab is-hidden" id="tab02">two</div>
<div id="address">

</div>

<button class="but active" id="but1" data-target="tab01">slide 1</button>
<button class="but" id="but2" data-target="tab02">slide 2</button>

CSS

body {
  background-color: white;
}

#tab01 {
  background: white;
}

#tab02 {
  background: red;
}

.tab {
  width: 100px;
  height: 100px;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
}

.is-hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

button {
  cursor: pointer;
  padding: 5px;
  margin-top: 10px;
}

.active {
  background: darkgreen;
  color: white;
}

JavaScript

var boxLink = $('.but');
var box = $('.tab');

boxLink.click(function() {
  $('#but1').removeClass('active');

  var boxID = $(this).data("target");
  var currentbox = $('.tab:not(.is-hidden)');
  var targetBox = $('.tab#' + boxID);

  if (!$(this).hasClass('active')) {
    boxLink.removeClass('active');
    $(this).addClass('active');
    // boxIn(targetBox);

    TweenMax.to( currentbox, 0.2, {ease:Power4.easeOut, className: '-=visible', autoAlpha: 0,  onComplete: boxIn, onCompleteParams: [targetBox] });
  }

  return false;
});

var boxIn = function(targetBox) {
  box.addClass('is-hidden');
  targetBox.removeClass('is-hidden');

  TweenMax.to( targetBox, 0.2, {autoAlpha: 1,className: '+=visible', ease:Power4.easeIn});
}