JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
    <script type="text/html" id="tmpl">
      <div id="change-state">
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name: <input data-bind="value: lastName" /></p>
        <p>Full name: <strong data-bind="text: fullName"></strong></p>
      </div>
    </script>
    
    <div id="popup">
        <div data-bind="template: { name: 'tmpl' }"></div>
    </div>
    
    <button id="show">Show</button>

JavaScript

function AppViewModel() {
        this.firstName = ko.observable("test");
        this.lastName = ko.observable("test");
        this.fullName = ko.computed(function() { 
            return this.firstName() + " " + this.lastName();
        }, this);
    };
    
    ko.applyBindings(new AppViewModel(), $("#popup").get(0));
    
    $("#popup").dialog({ 
        autoOpen: false 
    });
    
    $("#show").click(function() {
        $("#popup").dialog("open");
    });