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' type='text/css' />
        <!-- 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>Manage your foos!</p>' +

    '<div id="my-list" data-role="listview" data-inset="true">' +
      '{{#each App.fooController.content}}' +
        '<li>' +
          '<a data-role="button">{{this.text}}</a>' +
        '</li>' +
      '{{/each}}' +
    '</div>' +

    '<a data-role="button" {{action "addFoo" target="view"}}>Add Foo</a>' + 
    '<a data-role="button" {{action "removeFoo" target="view"}}>Remove Foo</a>' +
  '</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');
});


// MODEL

App.fooModel = Ember.Object.extend({
    text: ''
});


// CONTROLLER

App.fooController = Ember.ArrayController.extend({

    content: [],

    addFoo: function() {
        var foo = App.fooModel.create({
            'text': 'Foo ' + this.content.length
        });
        this.content.pushObject(foo);
    },

    removeFoo: function() {
        // Remove last object
        this.content.removeObject(this.content[this.content.length - 1]);
    },

    contentObserver: function() {

        Ember.run.next(function() {
           ...