JSFiddle - React, Tailwind, and code Playground

by Udhay

HTML

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

        <!--/ko-->
    </ul>
    <div data-bind="text: editorText">
    
    </div>

CSS

.active { color: #ff6600; }

JavaScript

var MainViewModel = {
        tabArray: [
                { name: 'bob', init: true },
                { name: 'bib', init: false },
                { name: 'bab', init: false },
                { name: 'bub', init: false },
                { name: 'beb', init: false },
        ],
       toggleActive: function (clicked) {
        	console.log(clicked);
       }
       editorText = ko.observable(text);
 };

ko.applyBindings(MainViewModel);