JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="http://torontographic.com/wordpress/mouseSwipe/jquery.easing.1.3.js"></script>
<script src="http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div data-role="page" class="jqm-demos" id="demo-page">
     <div data-role="panel" id="left-panel" data-theme="b">
        <p>Left reveal panel.</p>	<a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a>

    </div>
    <!-- /panel -->
    <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="b">
        <p>Right push panel.</p>	<a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>

    </div>
    <div data-role="header" data-theme="b">
         <h1> </h1>
	<a href="#left-panel" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
	<a href="#right-panel" data-icon="carat-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open right panel</a>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
         <h1>Swipe left or right in the box behind</h1>
        <table id="table1" align="center" cellpadding="5" cellspacing="0">
            <tr>
                <td colspan="1">
                    <div id="viewport" onselectstart="return false;">
                        <div id="mouseSwipe2">
                            <div class="panel">test 1</div>
         ...

CSS

/* Swipe works with mouse as well but often causes text selection. */
		/* We'll deny text selecton on everything but INPUTs and TEXTAREAs. */
		#demo-page :not(INPUT):not(TEXTAREA) {
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    -o-user-select: none;
		    user-select: none;
		}
		
		body {
		    font-family: Arial, Helvetica, sans-serif;
		    font-size: 12px;
		}
		#table1 {
		    width: 800px;
		}
		#table1 td {
		    text-align: center;
		    vertical-align: top;
		}
		ul {
		    text-align: left;
		    font-size: 12px;
		}
		#viewport {
		    position: relative;
		    width: 300px;
		    height: 40px;
		    margin: 0px;
		    overflow: hidden;
		}
		#mouseSwipe1, #mouseSwipe2, #slideshow {
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    position: relative;
		    width: 300px;
		    height: 225px;
		    margin: 0px;
		    cursor: move;
		}
		.panel {
		    margin: 0px;
		    padding: 0px;
		    width: 294px;
		    height: 40px;
		    overflow: hidden;
		    border-style: solid;
		    border-width: 1px;
		}
		#mouseSwipeScroll {
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    position: relative;
		    width: 300px;
		    height: 40px;
		    margin: 0px;
		    cursor: move;
		}
		.navLeft, .navRight, .navTop, .navBottom {
		    position: absolute;
		    display: block;
		    background-color: transparent;
		    cursor: pointer;
		    z-index: 100;
		}
		.navLeft {
		    top: 0px;
		    left: 0px;
		    width: 25px;
		    height: 100%;
		    text-align: center;
		    background-image: url('images/arrowL.png');
		    background-position: center center;
		    background-repeat: no-repeat;
		}
		.navRight {
		    top: 0px;
		    right: 0px;
		    width: 25px;
		    height: 100%;
		    background-image: url('images/arrowR.png');
		    background-position: center center;
		    background-repeat: no-repeat;
		}
	
		#pagenum1, #pagenum2 {
		    margin: 0px auto;
		    width:...

JavaScript

// 1. When you swipe in the mobile it's ok, but from a desktop once you swipe the box, the panel also appear. I've found a possible solution, not sure if it's the proper one but it's working:
//$(document).on("swipeleft swiperight", "#mouseSwipe1", function (e) {
//    e.stopPropagation();
//
//});

//2. This is a styles issue, not sure why I can see test 3 inline with test 1 and test 2, I've tried changing all width but still no luck

//3. And another style issue, when you swipe to see the panels, sometimes there is a black big row at the bottom, but if you swipe several times sometimes disappears, bit crazy

$(document).ready(function () {

            $(document).on("swipeleft swiperight", "#demo-page", function (e) {
                // We check if there is no open panel on the page because otherwise
                // a swipe to close the left panel would also open the right panel (and v.v.).
                // We do this by checking the data that the framework stores on the page element (panel: open).
                if ($.cookie("swiped")  != "true"  ){
                if ($(".ui-page-active").jqmData("panel") !== "open") {
                    if (e.type === "swipeleft") {
                        $("#right-panel").panel("open");
                    } else if (e.type === "swiperight") {
                        $("#left-panel").panel("open");
                    }
                }}
            });





            $(document).bind("dragstart", function () {
                return false;
            });

            $('#mouseSwipe1').swipe({
                TYPE: 'panelSwipe',
                HORIZ: true,
                SNAPDISTANCE: 20,
                DURATION: 750,
                EASING: 'easeOutBack',
                ARROWS: true,
                FADEARROWS: true,
                PAGENUM: '#pagenum1'
            });

            $('#mouseSwipe2').swipe({
                TYPE: 'panelSwipe',
                HORIZ: true,
                SNAPDISTANCE: 20,
 ...