JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" data-tar="#Tab1">Show Tab 1</button>
        <button type="button" data-tar="#Tab2">Show Tab 2</button>
        <button type="button" data-tar="#Tab3">Show Tab 3</button>
        <button type="button" data-tar="#Tab4">Show Tab 4</button>
        <button type="button" data-tar="#Tab5">Show Tab 5</button>

        <div id="TabSection">
          <div id="Tab1">
            <h1>Tab 1</h1>
            <div>Ajax Response</div>
          </div>

          <div id="Tab2">
            <h1>Tab 2</h1>
            <div>Ajax Response</div>
          </div>

          <div id="Tab3">
            <h1>Tab 3</h1>
            <div>Ajax Response</div>
          </div>

          <div id="Tab4">
            <h1>Tab 4</h1>
            <div>Ajax Response</div>
          </div>

          <div id="Tab5">
            <h1>Tab 5</h1>
            <div>Ajax Response</div>
          </div>
        </div>

CSS

@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855,...

JavaScript

$(function () {
    $('#Tab1').hide();
    $('#Tab2').hide();
    $('#Tab3').hide();
    $('#Tab4').hide();
    $('#Tab5').hide();
    
    window.lastDfd = $.Deferred();
    $('button').click(function (event) {
        var inTarget = $($(event.target).data().tar);
        var outTarget = $('#TabSection').children(':visible()');
        console.log(inTarget);
        console.log(outTarget);
        var ajaxCallDfd = $.Deferred();
        setTimeout(function () {
            ajaxCallDfd.resolve();
        }, 1000);
        
        window.lastDfd.reject();
        
        window.lastDfd = genericSwipeVertFunc(ajaxCallDfd, outTarget, inTarget);
    });
});

var genericSwipeVertFunc = function (ajaxRequest, swipeOutTarget, swipeInTarget) {
    var stage1, stage2, failStage, dfd = $.Deferred(), finalStage, functionPromise;

    // Swipe of screen wait for ajax request
    stage1 = function () {
        return $.when(
            ajaxRequest, // Returns $.Deferred()
            animateDeffered(swipeOutTarget, "fadeOutDown", true) // Returns $.Deferred()
        );
    };

    // Swipe and Show
    stage2 = function () {
        swipeInTarget.show();

        return animateDeffered(swipeInTarget, "fadeInDown"); // Returns $.Deferred()
    };

    finalStage = function () {
        dfd.resolve();
    }

    failStage = function () {
        console.log("fail!");
        swipeInTarget.stop(true).hide();
        swipeOutTarget.stop(true).hide();
    };

    functionPromise = stage1()
        .then(stage2)
        .then(finalStage);

    $.when(functionPromise,dfd)
        .fail(failStage);

    return dfd;
};

var animateDeffered = function (target, animation, hideOnComplete) {
    var dfd = new $.Deferred();
    // if no target return resolved;
    if(target.length !== 1){
        return dfd.resolve();
    }

    target.addClass(animation + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (event) {
       ...