JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="http://enyojs.com/enyo-1.0/enyo.js"></script>

CSS

.from-a {
    color:red;
    font-weight:bold;
}

.from-b {
    border:2px solid blue;
}

.from-c {
    font-size:20pt;
}

.from-app {
    background:#ccc;
}

JavaScript

enyo.kind({
    name:"ex.A",
    kind:"Control",
    className:"from-a"
});

enyo.kind({
    name:"ex.B",
    kind:"ex.A",
    className:"from-b"
});

enyo.kind({
    name:"ex.C",
    kind:"ex.B",
    className:"from-c"
});

enyo.kind({
    name:"ex.App",
    kind:"Control",
    components:[
        {kind:"ex.A", className:"from-app", content:"A"},
        {kind:"ex.B", className:"from-app", content:"B"},
        {kind:"ex.C", className:"from-app", content:"C"}
    ]
});

new ex.App().renderInto(document.body);