JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" class="slide-left">Slide Left</button>
    <button type="button" class="slide-right">Slide Right</button>
    <hr>
    <div class="box">
        <div>AAAAAAAAAAAAAAAAAAA</div>
        
    </div>
    <div>
         <div>BB</div>
    </div>

CSS

.box{
        float:left;
        overflow: hidden;
        background: #f0e68c;
    }
   
    .box-inner{
        width: 400px;
        padding: 10px;
        border: 1px solid #a29415;
    }

JavaScript

$(document).on("pagecreate", "[data-role='page']", function()
{

    $(this).find('section').not(":eq(0)").addClass("ui-screen-hidden");
    $(this).find("section:eq(0)").addClass("active");

    $(".ui-content").on("swipeleft swiperight", function (e)
    {

        var swipe = e.type,
            nextStep = $(this).find("section.active").next("section"),
            prevStep = $(this).find("section.active").prev("section");

        switch (true)
        {
            case (swipe == "swipeleft" && nextStep.length > 0):
                $(this).find("section.active")
                    .toggleClass("slide out");
                break;
            case (swipe == "swiperight" && prevStep.length > 0):
                $(this).find("section.active")
                    .toggleClass("slide out reverse");
                break;
        }
    });