JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>EMBER + JQM</title>
        <!-- JQM CSS -->
        <link href='https://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet' />
        <!-- JQUERY -->
        <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
        <script>
            // JQM init event handler
            $(document).bind('mobileinit', function() {
                $.mobile.ajaxEnabled = false;
                $.mobile.pushStateEnabled = false;
                $.mobile.linkBindingEnabled = false;
                $.mobile.hashListeningEnabled = false;
            });
        </script>
        <!-- JQUERY MOBILE -->
        <script src="https://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
        <!-- HANDLEBARS -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
        <!-- EMBER -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.4.0/ember.js"></script>
    </head>
    
    <body>
        <script type="text/x-handlebars" data-template-name="application">
            {{ outlet }}
        </script>
        <!-- Home page -->
        <script type="text/x-handlebars" data-template-name="index">
            {{ view App.HomeView }}
        </script>
        <!-- About page -->
        <script type="text/x-handlebars" data-template-name="about">
            {{ view App.AboutView }}
        </script>
    </body>

</html>

JavaScript

// READ THIS:
// When working in a multi-file project, templates are usualy 
// loaded using require.js. For the sake of simplicity, we 
// wrote our templates in these two variables

var homePage =
    
'<div id="home-page" data-role="page" class="ui-page-active">' +

  '<div data-role="header">' +
    '<h1>Home page</h1>' +
    '<a data-icon="info" data-iconpos="notext" {{action "about" target="view"}}></a>' +
  '</div>' +

  '<div data-role="content">' +
    '<p>Click the top left button to go to the about page</p>' +
  '</div>' +

'</div>';


var aboutPage =
    
'<div id="about-page" data-role="page" class="ui-page-active">' +

  '<div data-role="header">' +
    '<h1>About page</h1>' +
    '<a data-icon="home" data-iconpos="notext" {{action "home" target="view"}}></a>' +
  '</div>' +

  '<div data-role="content">' +
    '<p>Some information about something here...</p>' +
    '<a data-role="button">Useless button</a>' +
  '</div>' +

'</div>';


App = Ember.Application.create();


// ROUTER

App.Router.map(function () {
    this.route('about');
});


// VIEWS

App.PageView = Ember.View.extend({

    didInsertElement: function () {
        if ($('.ui-page-active').length) {
            $('.ui-page-active').parent().trigger('create');
        }
    }
});

App.HomeView = App.PageView.extend({

    template: Ember.Handlebars.compile(homePage),
    actions: {

        about: function () {
            App.Router.router.transitionTo('about');
        }
    }
});

App.AboutView = App.PageView.extend({

    template: Ember.Handlebars.compile(aboutPage),
    actions: {

        home: function () {
            App.Router.router.transitionTo('index');
        }
    }
});