JSFiddle - React, Tailwind, and code Playground

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div>
    <b data-bind="text:Id"></b>
    <b data-bind="text:Name"></b>
    <b data-bind="text:Visible"></b>
    
    <div data-bind="foreach:Items">
      <span data-bind="text:Id"></span>
      <span data-bind="text:Name"></span>
    </div>
</div>

JavaScript

function Model(){
		var self = this;
    
    self.Id = ko.observable(0);
    self.Name = ko.observable("Default");
    self.Visible = ko.observable(false);
    self.Items = ko.observableArray([]);
}

function ModelItem(){
		var self = this;

		self.Id = ko.observable(0);
    self.Name = ko.observable("Default item name")
}

var m = new Model();

ko.mapping.fromJS({
	Id:1,
  Name: "Test",
  Visible: true,
  Items: [
  	{
    	Id:1,
      Name:"First"
    },
    {
    	Id:2,
      Name:"Second"
    }
  ]
}, m);

ko.applyBindings(m);