JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul>
<!-- ko foreach: {data: cities, as: 'city'} -->
    <li><input data-bind="value: city.name"/><span data-bind="text: city.name"></span></li>
    <ul>
    <!-- ko foreach: {data: neighborhoods, as: 'neighborhood'} -->
        <li><input data-bind="value: name"/><span data-bind="text: name"></span></li>
    <!-- /ko -->
    </ul>
<!-- /ko -->
</ul>
</body>

CSS

a {
    color: blue;
}

JavaScript

var sf = {name: ko.observable('San Francisco'), neighborhoods: ko.observableArray([new neighborhood('Haight'), new neighborhood('Bayview'),new neighborhood('Marina')])};
var ny = {name: ko.observable('New York'), neighborhoods: ko.observableArray([new neighborhood('Hells Kitchen'), new neighborhood('Times Square')])};

function neighborhood(name) {
 this.name = ko.observable(name);
}

var cities = ko.observableArray([sf, ny]);
var viewModel = {
    cities: cities,
}
ko.applyBindings(viewModel);