JSFiddle - React, Tailwind, and code Playground

by joshrivers

HTML

<script src="https://github.com/quirkey/sammy/raw/master/lib/sammy.js"></script>
<script src="http://jqtouch.com/preview/jqtouch/jqtouch.min.js"></script>
<link rel="stylesheet" href="http://jqtouch.com/preview/jqtouch/jqtouch.min.css">
<link rel="stylesheet" href="http://jqtouch.com/preview/themes/apple/theme.min.css">
<div id="nav">  
    <ul>  
        <li><a href="#/inbox">inbox</a></li>  
        <li><a href="#/compose">compose</a></li>  
        <li><a href="#/label/drafts">drafts</a></li>  
    </ul>  
</div>

<div id="content">AA</div>

JavaScript

var ratPack = $.sammy(function() {

    this.element_selector = '#content';

    this.get('#/inbox', function(context) {
        context.app.swap('');
        context.$element().append('BEEF');
    });
    this.get('#/compose', function(context) {
        context.app.swap('');
        context.$element().append('<h1>say hello to?</h1>' + '<form action="#/compose" method="post">' + '<input type="text" name="to" />' + '<input type="submit" name="submit" />' + '</form>');
    });

});

$(function() {
    ratPack.run('#/inbox');
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
            '../../themes/jqt/img/back_button.png',
            '../../themes/jqt/img/back_button_clicked.png',
            '../../themes/jqt/img/button_clicked.png',
            '../../themes/jqt/img/grayButton.png',
            '../../themes/jqt/img/whiteButton.png',
            '../../themes/jqt/img/loading.gif'
            ]
    });
});