JSFiddle - React, Tailwind, and code Playground

by Francesco Frustaci

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div id="tab">
    <ul class="nav nav-tabs" role="tablist">
        <!--ko foreach: tabArray-->         
            <li data-bind="click: $root.toggleActive, css: $parent.selectedTab() == $data ? 'active': ''">
                <a data-bind="attr: {href: '#' + name}, text: name"></a>
            </li>
        <!--/ko-->
    </ul>
</div>

CSS

.active {
    color: red;
}

JavaScript

$(function() {
    ko.applyBindings(new ViewModel());
});

var ViewModel = function () {
    var self = this;
    
    self.tabArray = [
        { name: 'bob'},
        { name: 'bib'},
        { name: 'bab'},
        { name: 'bub'},
        { name: 'beb'},
    ];
    
    self.selectedTab = ko.observable(self.tabArray[0]);
    
    self.toggleActive = function (tab) {
        self.selectedTab(tab);
    };
};