JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/1.0.0-build-99/ractive.js"></script>
<div id="bd"></div>
<script id="cp" type="text/ractive">
    Ractive tpl
    <componentone myval="Hello val" />
</script>
<script id="cp1" type="text/ractive">
    Component one !
    <componenttwo someval="{{myval}}" />
</script>
<script id="cp2" type="text/ractive">
    your val is this ? {{someval}}
</script>

JavaScript

var ractive = new Ractive({
    el: 'bd',
    template: "#cp",
    components: {
    'componenttwo': Ractive.extend({
        template:'#cp2'
        }),
    'componentone': Ractive.extend({
        template:'#cp1'
        })
    }
});