JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="news">
    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
         <h1>Current Affairs</h1>
 <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
 <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>

    </div>
    <div id="news_feed" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
    <div id="tv_links" data-position="fixed" data-tap-toggle="false" data-role="footer" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>

                </li>
                <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>

                </li>
                <li> <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>

                </li>
                <li> <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="business">
    <div data-role="header" data-theme="b">
         <h1>Business News</h1>
 <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
 <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>

    </div>
    <div id="biz" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
    <div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="#business"...

JavaScript

$(document).on('swipeleft swiperight', function (event) {
        if (event.type == 'swipeleft') {
            var nextPage = $.mobile.activePage.next('[data-role=page]');
            if (nextPage) {
                $.mobile.changePage(nextPage, {
                    transition: "flip"
                });
            }
        }
        if (event.type == 'swiperight') {
            var prevPage = $.mobile.activePage.prev('[data-role=page]');
            if (prevPage) {
                $.mobile.changePage(prevPage, {
                    transition: "flip",
                    reverse: true
                });
            }
        }
    });