JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="output"></div>
<script id="template" type="text/html">
    <div class="Title">Title 1</div>
    <span>{{titleLabel}}</span>
    
    <div class="Title">Title 2</div>
    <span>{{titleLabel}}</span>
    
    <div class="Title">Title 3</div>
    <span>{{titleLabel}}</span>
</script>

JavaScript

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);
    });
}); */