JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="with: selectedLanguage">
    <h1 data-bind="text: header"></h1>
    <h2 data-bind="text: subHeader"></h2>
    <p data-bind="text: body"></p>
</div>
<select data-bind="options: languages, optionsText: 'name', value: selectedLanguage"></select>

JavaScript

var Language = function(language) {
    this.name = ko.observable(language.name);
    this.header = ko.observable(language.header);
    this.subHeader = ko.observable(language.subHeader);
    this.body = ko.observable(language.body);
};

var ViewModel = function(data) {
    var self = this;
    self.languages = ko.observableArray(
    ko.utils.arrayMap(data, function(i) {
        return new Language(i);
    }));
    self.selectedLanguage = ko.observable();
};


var languages = [
    {
    name: "English",
    header: "Welcome",
    subHeader: "Demo",
    body: "This is the language demo"},
{
    name: "Spanish",
    header: "Bienvenidos",
    subHeader: "Demostración",
    body: "Esta es la demostración de idioma"}
];
ko.applyBindings(new ViewModel(languages));