JSFiddle - React, Tailwind, and code Playground

by tronne

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src=" http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="sample-page" class="ui-page ui-page-theme-a ui-page-footer-fixed ui-page-active">

    <div data-role="header" style="background-color:lightgrey; min-height:50px;">
<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>
      

    </div> <!-- /header -->

    <div data-role="content">
        <p>Hello world</p> <p>Hello world</p> <p>Hello world</p>

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>My Footer</h4>
    </div><!-- /footer -->

    <div class="panel left" data-role="panel" data-position="left" data-display="push" id="left-panel">
        <div data-role="footer" data-position="fixed">
        <h4>My Footer</h4>
    </div><!-- /footer -->
        <ul>
            <li class="newsfeed"><a href="#" title="Home">Upload Logo</a></li>
            <li class="profile"><a href="#" title="Profile">Manage Company Details</a></li>
            <li class="setting"><a href="#" title="Setting">Manage Form Fields</a></li>

            <li class="report"><a href="#" title="Report">Report Issue</a></li>
            <li class="logout"><a href="#" title="Logout">Logout</a></li>
        </ul>
        <div data-role="footer" data-position="fixed">
        <h4>My Footer</h4>
    </div><!-- /footer -->
    </div>



</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;
        }
        /* Content styling. */
        dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
        dt { font-size: 2em; font-weight: bold; }
        dt span { font-size: .5em; color: #777; margin-left: .5em; }
        dd { font-size: 1.25em;	margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
        .back-btn { float: right; margin: 0 2em 1em 0; }