JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css">
<div data-role="header" data-theme="a" id="header">
    
<h1>Mainpage</h1>

</div>
<div data-role="main" class="ui-content">
    <div data-role="tabs" id="tabs">
        <div data-role="navbar" data-iconpos="left">
            <ul>
                <li><a id="lblTab1" href="#location" data-ajax="false" class="ui-btn-active" data-icon="search" data-transition="pop">search</a>

                </li>
                <li><a id="lblTab2" href="#product" data-ajax="false" data-icon="location" data-transition="pop">product</a>

                </li>
            </ul>
        </div>
        <div id="location" class="ui-body-d ui-content">content</div>
        <div id="product" class="ui-body-d ui-content">content2</div>
    </div>
</div>

JavaScript

$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
    $(ui.newPanel).addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass("animated fadeInUp");
    });
});