JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="foreach: example">
    <h2 data-bind="text: title"></h2>
    <div data-bind="template: { name: controlID }"></div>
</div>

<script id="SimpleLabel" type="text/html">
    <!-- ko with: items -->
    <p data-bind="text: TextValue"></p>
    <!-- /ko -->
</script>
<script id="TextBox" type="text/html">
    <!-- ko with: items -->
    <p data-bind="text: SomeOtherProp"></p>
    <!-- /ko -->
</script>

JavaScript

var ViewModel = function () {
    var self = this;

    self.example = ko.observableArray([{
        controlID: "SimpleLabel",
        title: "Simple label 1",
        items: {
            TextValue: "Hello world"
        }
    }, {
        controlID: "TextBox",
        title: "TextBox 1",
        items: {
            SomeOtherProp: "Foo"
        }
    }, {
        controlID: "SimpleLabel",
        title: "Simple label 2",
        items: {
            TextValue: "Bye bye"
        }
    }]);

};
ko.applyBindings(new ViewModel());