JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div data-bind="foreach: customers">
    <div>
        <input data-bind="checked: selected" type="checkbox" />
        <span data-bind="text: name"></span>
        <span data-bind="visible: selected, template: { name: type, data: model }"></span>
    </div>
<div>    

<script type="text/html" id="CustomerTypeOne">
    <input data-bind="checked: someData" type="checkbox" />
</script>        

<script type="text/html" id="CustomerTypeTwo">
    <input data-bind="value: someOtherData" />
</script>

JavaScript

ViewModel = function() {
    this.customers = []; 
    this.customers.push(new Customer("John Doe", "CustomerTypeOne", new CustomerTypeOne()));          
    this.customers.push(new Customer("Jane Doe", "CustomerTypeTwo", new CustomerTypeTwo()));          
};

Customer = function(name, type, model) {
    this.name = name;
    this.type = type;
    this.model = model;
    this.selected = ko.observable(false);     
};

CustomerTypeOne = function() {
    this.someData = ko.observable(true);
}
    
CustomerTypeTwo = function() {
    this.someOtherData = ko.observable("some other data");
}

    
ko.applyBindings(new ViewModel());