JSFiddle - React, Tailwind, and code Playground

HTML

<!--<div data-bind="foreach: items" >
    <span data-bind="css : styling, text: name, click : toggle"></span>
    <br/>
</div>-->


<h4>People</h4>
<ul data-bind="foreach: people">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <span data-bind="text: name, css:  $root.styling($data), click: function () { $root.toggle($data);}"> </span>
    </li>
</ul>

CSS

.test
{
    color: green;
}
.bold
{
    font-weight: bold;
}

JavaScript

function AppViewModel() {
    var self = this;
    self.people = ko.observableArray([
        { name: 'Bert', active: ko.observable(false) },
        { name: 'Charles', active: ko.observable(false) },
        { name: 'Denise', active:ko.observable(false) }
    ]);
    self.styling =function (person) {
        if (person.active() === true) {
            return 'test';
        }
        else {
            return '';
        }
    };

    self.toggle = function (person) {
       person.active(!person.active());      
    }
    
}
 
ko.applyBindings(new AppViewModel());