JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav nav-list bs-docs-sidenav affix" data-bind="foreach:Folders">
                <li data-bind="css:{active: $data == $parent.chosenFolderId() }">
               
                    <a href="#" data-bind="click: $parent.navigate">                      
                        <!-- ko text: $data -->
                        <!-- /ko -->
                        <i class="icon-chevron-right"></i>
                    </a>
                </li>                   
            </ul>

CSS

.active {
    background: red;
}

JavaScript

var viewModel = function() {
    var self = this;
    self.Folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.SelectedFolder = ko.observable('Inbox');
    self.chosenFolderId = ko.observable();
    self.navigate = function(folder) {
        self.chosenFolderId(folder);
    }
};
ko.applyBindings(new viewModel());