JSFiddle - React, Tailwind, and code Playground

HTML

<script id="ParamHomeTmpl" type="text/html">
   <section class="alert alert-info">
       <div class="panel-heading h3  blackincolor"><i class="fa fa-exclamation-circle redincolor" style="margin-right: 5px"></i>Please Select Parameter Type</div>
   
       <ul class="blackincolor list-group">
           <li><a class="list-group-item list-group-item-info" data-bind="click: templateToUse.bind(0,'InputTypeTmpl')" href="#" id="InputType"><b>Input Type:</b> Gives an Option to Select your Key-Value Pairs.</a></li>
   
           <li><a class="list-group-item list-group-item-success" data-bind="click: templateToUse.bind(0, 'ListTypeTmpl')" href="#" id="ListType"><b>List Type:</b> You can type in a Key and insert a list of values and select one of the values that you created.</a></li>
       </ul>
   </section>
</script>
<script id="InputTypeTmpl" type="text/html">
   <div>
       <p>Input Type</p>
   </div>
   <table id="paramtypeTbl" data-bind="template:{ name: 'paramDataTmpl'}">
   </table>
</script>
<script id="ListTypeTmpl" type="text/html">
   <div>
       <p>ListType</p>
   </div>
</script>
<script id="paramDataTmpl" type="text/html">
    <div data-bind="foreach: ParamData">
        
        <span></span><span>Products</span>
        <table>
            <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-bind="text: paramKey"></td>
                    <td data-bind="text: paramValue"></td>
                </tr>
            </tbody>
        </table>
    </div>
</script>
<script id="BlankTmpl" type="text/html"></script>
<div class="tab-pane" id="SelectParamType" data-bind="template: { name: 'ParamHomeTmpl' }">
</div>
<div class="tab-pane" id="Attributes" data-bind="template: { name: templateToUse }">
</div>

JavaScript

var templateType = "BlankTmpl";

var Tempdata = ([{
    paramKey: "Sourabh",
    paramValue: "Tewari"
}]);

var viewModel = {
    ParamData: ko.observableArray(Tempdata)
};

viewModel.templateToUse = function (name) {
    if (typeof name === 'string') templateType = name;
    ko.applyBindingsToNode(document.getElementById("Attributes"), {
        template: {
            name: templateType
        }
    }, {
        ParamData: ko.observableArray(Tempdata)
    });
};

viewModel.ParamView = function (data, event) {
    ko.applyBindingsToNode(document.getElementById("paramtypeTbl"), {
        ParamData: ko.observableArray(Tempdata),
        template: {
            name: ParamView
        }
    });
};
ko.applyBindings(viewModel);