JSFiddle - React, Tailwind, and code Playground

by schawaska

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
            <h1>My Ember Application</h1>
            {{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
            <br /><hr />
            <div class="content">
                {{outlet}}
            </div>
        </script>

        <script type="text/x-handlebars" data-template-name="navbar">
            <ul>
                <li><a href="#" {{action gotoHome}}>Home</a></li>
                <li><a href="#" {{action gotoStarting}}>Getting Started</a></li>
                <li><a href="#" {{action gotoCommunity}}>Community</a></li>
            </ul>
        </script>

        <script type="text/x-handlebars" data-template-name="getting-started-menu">
            <ul>
                <li><a href="#" {{action gotoIndex}}>Overview</a></li>
                <li><a href="#" {{action gotoMVC}}>About MVC</a></li>
                <li><a href="#" {{action gotoEmber}}>About Ember</a></li>
            </ul>
        </script>
            
        <script type="text/x-handlebars" data-template-name="home">
            <h2>Welcome</h2>
            <br />
            <img src="http://emberjs.com/images/about/ember-productivity-sm.png" alt="ember logo" />
            <br />
            <br />
            <p>Bacon ipsum dolor sit amet qui ullamco exercitation, shankle beef sed bacon ground round kielbasa in. Prosciutto pig bresaola, qui meatloaf ea tongue non dolore et pork belly andouille ribeye spare ribs enim. Enim exercitation elit, brisket nisi ex swine in jerky consequat pastrami dolore sed ad. In drumstick cow, salami swine fatback short ribs ham ut in shankle consequat corned beef id. Deserunt prosciutto beef speck. Sirloin incididunt kielbasa excepteur irure.</p>

<p>Do beef ribs...

CSS

body {
                font-family: Georgia, "Times New Roman", Times, serif;
            }

            p {
                padding-left: 28px;
            }

            li {
                float: left;
            }

            ul a {
                padding-right: 24px;
                padding-left: 24px;
                display: block;
                text-decoration: none;
                font-size: 21px;
                color: #371C1C;
            }

            ul a:hover {
                text-decoration: underline;
            }

JavaScript

$(function () {
                App = Em.Application.create();

                App.ApplicationController = Em.Controller.extend();
                App.ApplicationView = Em.View.extend({ templateName: 'application' });

                App.HomeController = Em.Controller.extend();
                App.HomeView = Em.View.extend({ templateName: 'home' });

                App.NavbarController = Em.Controller.extend();
                App.NavbarView = Em.View.extend({ templateName: 'navbar' });

                App.StartingController = Em.Controller.extend();
                App.StartingView = Em.View.extend({ templateName: 'starting' });


                App.StartingMenuController = Em.Controller.extend();
                App.StartingMenuView = Em.View.extend({ templateName: 'getting-started-menu' });

                App.AboutMVCController = Em.Controller.extend();
                App.AboutMVCView = Em.View.extend({ templateName: 'about-mvc'});

                App.AboutEmberController = Em.Controller.extend();
                App.AboutEmberView = Em.View.extend({ templateName: 'about-ember'});

                App.CommunityModel = Em.Object.extend({
                    displayName: null,
                    linkUrl: null,
                    imageUrl: null
                });

                App.CommunityController = Em.ArrayController.extend({
                    content: [],
                    init: function() {
                        this._super();
                        this.pushObject(
                            App.CommunityModel.create({
                                displayName: 'Twitter',
                                linkUrl: 'https://twitter.com/#!/emberjs',
                                imageUrl: 'http://icons.iconarchive.com/icons/iconshots/social-media-network/32/twitter-icon.png'
                            })
                        );
                        this.pushObject(
                            App.CommunityModel.create({
      ...