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 = {    
    Folders: ['Inbox', 'Archive', 'Sent', 'Spam'],
    SelectedFolder: ko.observable('Inbox'),
    chosenFolderId: ko.observable(),
    navigate: function(folder) {
        viewModel.chosenFolderId(folder)
    }
};
ko.applyBindings(viewModel);