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.lastAnim = null;
    $('button').click(function (event) {
        var inTarget = $($(event.target).data().tar);
        var outTarget = $('#TabSection').children(':visible()');

        var ajaxCallDfd = $.Deferred();
        setTimeout(function () {
            ajaxCallDfd.resolve();
        }, 1000);
        
        if(window.lastAnim !== null && window.lastAnim.jObj.queue("stages").length !== 0){
            window.lastAnim.jObj.clearQueue("stages");
            window.lastAnim.failFn();
        }
        	window.lastAnim = genericSwipeVertFunc(ajaxCallDfd, outTarget, inTarget)
        
    });
});

var genericSwipeVertFunc = function (ajaxRequest, swipeOutTarget, swipeInTarget) {
    var stage1, stage2, failStage, queueObj;

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

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

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

    failStage = function () {
        console.log("fail!");
        swipeInTarget.hide();
        swipeOutTarget.hide();
        swipeInTarget.removeClass("animated");
        swipeOutTarget.removeClass("animated");
        swipeInTarget.removeClass("fadeOutDown");
        swipeOutTarget.removeClass("fadeOutDown");
        swipeInTarget.removeClass("fadeInDown");
        swipeOutTarget.removeClass("fadeInDown");
    };

    queueObj = $({stages:[]});
    queueObj.queue("stages", [stage1, stage2]);
    queueObj.dequeue("stages");
    
    return {
        jObj:queueObj,
        failFn: failStage
    };
};

var animateDeffered = function (target, animation,...