JSFiddle - React, Tailwind, and code Playground

HTML

<main></main>

<script id='template' type='text/ractive'>
    {{#each items}}
      <button type=button on-click="toggle('active')">T{{.active}}</button>
      {{#if .active}}
        {{>getComponent(componentType)}}
        {{/if}}
    {{/each}}
</script>

CSS

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

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

button, input {
    display: block;
}

.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

Ractive.prototype.data = {
    getComponent: function(name){
        if (!!this.partials[name]) return name;
        this.partials[name] = '<' + name + '/>';
        return name;
    }
}

Ractive.components['button-widget'] = Ractive.extend({
    template: '<button>{{value}}</button>'
});
Ractive.components['input-widget'] = Ractive.extend({
    template: '<input value="{{value}}">'
});
Ractive.components['paragraph-widget'] = Ractive.extend({
    template: '<p>widget: {{value}}</p>'
});

var ractive = window.XXX = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        items: [
            { active: true, componentType: 'button-widget', value: 'foo' },
            { componentType: 'input-widget', value: 'bar' },
            { componentType: 'paragraph-widget', value: 'baz' }
        ]
    }
});