JSFiddle - React, Tailwind, and code Playground

HTML

<div class="control-group" style="clear: both;">
                    <label class="control-label" for="offerTypes">Type of Offer</label>
                    <div class="controls">
                        <select class="input-block-level" id="offerTypes" data-bind="options: offerTypes, 
                                                                                     optionsText: 'DisplayName', 
                                                                                     optionsValue: 'Id', 
                                                                                     value: selectedOfferType"></select>
                        <span class="help-block">Select the type of offer you would like to promote.</span>
                    </div>
                </div>

                <div class="control-group" style="clear: both;">
                    <label class="control-label" for="offerDetails">Offer Details</label>
                    <div class="controls">
                        <select class="input-block-level" id="offerDetails" data-bind="options: offerTypeDetailsTypes, 
                                                                                       optionsText: 'DisplayName', 
                                                                                       optionsValue: 'Id', 
                                                                                       value: selectedOfferTypeDetailsType"></select>
                        <span class="help-block">Select the specific type of offer you would like to promote.</span>
                    </div>
                </div>

                <div class="control-group" style="clear: both;">
                    <div class="controls">
                        <div id="offer" class="bs-docs-example" style="display: block;" data-bind="showOffer: offer"></div>
                        <span class="help-block">Click on the underlined words above to customize your offer.</span>
                 ...

JavaScript

var offerType = function(id, displayName) {
                var self = this;
                self.Id = id;
                self.DisplayName = displayName;
            };

            var offerTypeDetailsType = function(id, displayName, offerTypeId) {
                var self = this;
                self.Id = id;
                self.DisplayName = displayName;
                self.OfferTypeId = offerTypeId;
            };

            var viewModel = function() {
                var self = this;

                self.offerTypes = ko.observableArray([
                    new offerType('0', 'Purchase Discount'),
                    new offerType('1', 'Dollar Off')
                ]);

                self.offerTypeDetailsTypes = ko.observableArray([
                    new offerTypeDetailsType('0', 'Spend $ {{value}} Get $ {{value}} Off', '0'),
                    new offerTypeDetailsType('1', 'Spend $ {{value}} Get % {{value}} Off', '0'),
                    new offerTypeDetailsType('2', '$ {{value}} Off', '1'),
                    new offerTypeDetailsType('3', '$ {{value}} Off purchase of {{item}}', '1'),
                    new offerTypeDetailsType('4', '$ {{value}} Off purchase of $ {{value}} or more', '1'),
                    new offerTypeDetailsType('5', '% {{value}} Off', '2'),
                    new offerTypeDetailsType('6', '% {{value}} Off purchase of {{item}}', '2'),
                    new offerTypeDetailsType('7', '% {{value}} Off purchase of $ {{value}} or more', '2')
                ]);
                

                self.selectedOfferType = ko.observable(self.offerTypes()[1]);
                self.selectedOfferTypeDetailsType = ko.observable(self.offerTypeDetailsTypes()[2]);

                self.offerDetails = ko.computed(function() {
                    var activeCategories = ko.observableArray();
                    ko.utils.arrayForEach(self.offerTypeDetailsTypes(), function (item) {
                        if (item.Id ==...