JSFiddle - React, Tailwind, and code Playground

by supercool

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div id="Detail" class="side-widget" style="display:none">
     <h2>Details</h2>
 <strong>
        Supervisor<br/>
        <span data-bind="text: supervisor.FullName"></span><br/>
    </strong>
 <span data-bind="text: supervisor.PhoneNumber"></span>
    <br/> <a data-bind="text: supervisor.Email, attr: { href : 'mailto:'+supervisor.Email() }"></a>

</div>

JavaScript

var supervisorVM = {
    supervisor: ko.observable()
};

var json = {
    'FullName': 'charlie dustin',
    'PhoneNumber': '+795928',
    'Email': 'k@.com'
}

if (true) {
    $('#Detail').show();
    supervisorVM.supervisor = ko.mapping.fromJS(json);
    ko.applyBindings(supervisorVM, document.getElementById("Detail"));
}