JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='parent' type='text/ractive'>
    <label>
        Enter your name:
        <input value='{{name}}'/>
    </label>
    <label>
        Enter your lastname:
        <input value='{{lastname}}'/>
    </label>
    
    <iframe></iframe>
</script>

<script id='child' type='text/ractive'>
    <h1>Hello, {{name}} {{lastname}}!</h1>
    <p>We're using Ractive.js version {{v}}.</p>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

input {
    font-family: inherit;
    font-size: inherit;
}

label {
    display: block;
    margin: 0 0 1em 0;
}

JavaScript

var parent, child;

parent = new Ractive({
    el: 'main',
    template: '#parent',
    data: { name: 'world' }
});

child = new Ractive({
    el: parent.find( 'iframe' ).contentWindow.document.body,
    template: '#child',
    data: { v: Ractive.VERSION }
});

parent.observe( 'name,lastname', function ( name, lastname ) {
    child.set( {
        'name': name
        ,   'lastname': lastname
    });
});