JSFiddle - React, Tailwind, and code Playground

HTML

<script src="knockout-2.2.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<table id="accountTable" style="width: 100%; border: 2px solid grey;">
    <thead style="background-color: lightgray;">
        <tr>
            <td style="font-weight: bold">User Name
            </td>
            <td style="font-weight: bold">First Name
            </td>
            <td style="font-weight: bold">Last Name
            </td>
            <td style="font-weight: bold">Country
            </td>          
        </tr>
    </thead>
    <tbody data-bind="foreach:$data">
        <tr>
            <td>
                <span data-bind="text: UserName"/>
            </td>
            <td>
                <span data-bind="text: FirstName"/>
            </td>
            <td>
                <span data-bind="text: LastName"/>
            </td>
            <td>
                <span data-bind="text: Country"/>
            </td>            
        </tr>
    </tbody>
</table>

JavaScript

var data = [{"UserName":"devone@xyz.com", "FirstName":"Developer","LastName":"One","Country":"GB" }];
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);