JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="with: shell">
        <h2 data-bind="text: header"></h2>
        <div data-bind="with: $root.profile">
            <input data-bind="value: first" />
            <input data-bind="value: last" />
            <select id="billingchoice" data-bind="options: choices, optionsText: 'name', optionsValue: 'id', value: selectedChoice"> </select>
        </div>
        
    </div>

JavaScript

var profileMod = function() { 
     var self = this;
    self.first = ko.observable("Bob");
    self.last = ko.observable("Smith");
    self.choices = ko.observableArray([
            { id: "1", name: "Billable" },
            { id: "2", name: "Non Billable" }
            ]);
};

var profileModel =  {
            first: ko.observable("Bob"),
            last: ko.observable("Smith"),
            choices : ko.observableArray([
            { id: "1", name: "Billable" },
            { id: "2", name: "Non Billable" }
            ]),

            selectedChoice :ko.observable(2)
        };

        var shellModel = {
            header: ko.observable("Administration"),
            sections: ["profile", "settings", "notifications"],
            selectedSection: ko.observable()
        };

        //the overall view model
        var viewModel = {
            shell: shellModel,
            profile: new profileMod()
        };

        
ko.applyBindings(viewModel);