JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<select data-bind="foreach: groups">
    <optgroup data-bind="attr: {label: label}, foreach: children">
        <option data-bind="text: label"></option>
    </optgroup>
</select>

JavaScript

function Group(label, children) {
    this.label = ko.observable(label);
    this.children = ko.observableArray(children);
}

function Option(label) {
    this.label = ko.observable(label);
}

var viewModel = {
    groups: ko.observableArray([
        new Group("Group 1", [
            new Option("Option 1"),
            new Option("Option 2"),
            new Option("Option 3")
            ]),
        new Group("Group 2", [
            new Option("Option 4"),
            new Option("Option 5"),
            new Option("Option 6")
            ]),
        new Group("Group 3", [
            new Option("Option 7"),
            new Option("Option 8"),
            new Option("Option 9")
            ])
    ])
};

ko.applyBindings(viewModel);