JSFiddle - React, Tailwind, and code Playground

by EbenRoux

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.6.1/ember.debug.js"></script>
<body>
    <script type="text/x-handlebars">
        <h2>Welcome to Ember.js</h2>

        {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="components/my-abc">
        <h1>ABC</h1>
    </script>
    <script type="text/x-handlebars" data-template-name="index">
        <ul>
        {{my-abc}}
        {{my-xyz}}
        </ul>
    </script>

</body>

CSS

/* Put your CSS here */
html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
    // put your routes here
});

App.MyAbcComponent = Ember.Component.extend({})
App.MyXyzComponent = App.MyAbcComponent.extend({
    layoutName: 'components/my-abc'
})