JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="output"></div>
<script id="template" type="text/html">
    <Block title='Title 1'/>
    <Block title='Title 2'/>
    <Block title='Title 3'/>
</script>

<script id='block' type='text/html'>
    <div class="Title">{{title}}</div>
    <span>{{titleLabel}}</span>
</script>

JavaScript

Ractive.components.Block = Ractive.extend({
    template: '#block'
});

var ractive = Ractive({
    template: "#template",
    el: "#output",
    data: {
        titleLabel: "x"
    }
});

/* $(function(){
    $(".Title").after('<span class="Label"></span>');
    ractive.observe("titleLabel", function(newValue, oldValue, keypath) {
        $(".Label").text(newValue);
    });
}); */