JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div>
    Full Name: <input data-bind="value: fullName" disabled="disabled"/> <br />
    Ref: <input data-bind="value: referenceNumber" disabled="disabled"/> <br />
    Position: <input data-bind="value: position" disabled="disabled"/> <br />
    Email: <input data-bind="value: email" disabled="disabled"/> <br />
    Dept: <input data-bind="value: departmentName" disabled="disabled"/> <br />
    Country: <input data-bind="value: country" disabled="disabled"/> <br />
</div>

JavaScript

var json = {
    "id": 9,
    "fullName": "John Doe",
    "firstName": "John",
    "lastName": "Doe",
    "referenceNumber": "BUY-08",
    "position": "Buyer",
    "type": "Buyer",
    "telephone": "028 82 240780",
    "email": "[email protected]",
    "departmentId": 3,
    "departmentName": "DEPT B",
    "country": "United Kingdom"
};


var viewModel = {};

function success() {
    viewModel = ko.mapping.fromJS(json);
    ko.applyBindings(viewModel);
}
success();

//webAPICall("api/user/getcurrentuser", "GET", success); // simple wrapper I'm using for ajax calls