JSFiddle - React, Tailwind, and code Playground

HTML

<textarea style="width: 500px; height: 90px;"
data-bind="value: JSON.stringify(ko.toJS(contents()))"></textarea>

<table>
    <tbody data-bind="foreach: contents">
        <td> <strong>
                 <span id="textKey" data-bind="text: displayKey" />    
            </strong>
        </td>
        <td>
            <input id="textValue" type="text" data-bind="value: displayValue" />
        </td>
    </tbody>
</table>

CSS

body {
    font-family: sans-serif;
}
table, td, th {
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: 2px;
}
tr.category td {
    background-color: #ddd;
    font-style: italic;
}
td.num {
    text-align: right;
}

JavaScript

var vm = {
    contents: ko.observableArray([{
        "displayKey": "Fruit",
        "displayValue": "Bananas"
    }, {
        "displayKey": "Colour",
        "displayValue": "Red"
    }, {
        "displayKey": "Car",
        "displayValue": "Ferrari"
    }])
};
ko.applyBindings(vm, document.body);