JSFiddle - React, Tailwind, and code Playground

HTML

<div id="koSample">
  <div>
    <label>Zodiac</label>
    <select data-bind="options: Zodiac, value: Zodiac">
    </select>
  </div>
  <div>
    Summary
    <p>
      <span data-bind="html: Summary"></span>
      <br />
      <div id="total">Total: $<span data-bind="text: Total"></span></div>
    </p>
  </div>
</div>

CSS

#koSample div {
  padding: 5px;
}

#total {
  font-weight: bold;
}

JavaScript

var viewModel = {};
viewModel.Zodiac = ko.observable(null);
viewModel.Zodiac = ["Satin Pyjamas", "Jeans", "Leather Wallet"];
viewModel.Day = ko.observable(null);
viewModel.Day = ["Autolux", "International", "Express"];
viewModel.Month = ko.observable(null);
viewModel.Month = ["Satin Pyjamas", "Jeans", "Leather Wallet"];
viewModel.Pred = ko.observable(null);
viewModel.Pred = ["Autolux", "International", "Express"];

viewModel.Summary = ko.dependentObservable(
  function() {
    var summary = "";
    summary += this.Product();
    summary += (this.GiftWrap() == 'Yes') ? " in gift wrap" : " in simple wrap";
    summary += (this.GiftWrap() == 'Yes' && this.Greating() != '') ? (" with greating '" + this.Greating() + "'") : "";
    summary += "<br />";
    summary += "Delivery address: " + this.Address();
    summary += (this.Delivery() == 'Ukraine') ? " with " + this.Carrier() + " carrier" : "";
    summary += "<br />";
    return summary;
  },
  viewModel);

viewModel.Total = ko.dependentObservable(
  function() {
    var total = 0;
    total += (this.GiftWrap() == 'Yes') ? 20 : 5;

    if (this.Delivery() == 'Kharkov') {
      total += 30;
    } else {
      if (this.Carrier() == 'Autolux') {
        total += 20;
      }

      if (this.Carrier() == 'International') {
        total += 10;
      }

      if (this.Carrier() == 'Express') {
        total += 35;
      }
    }

    return total;
  },
  viewModel);

ko.applyBindings(viewModel, document.getElementById("koSample"));