JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" data-bind="click: openModal">Click here to open modal</a>
<!-- ko with: modal -->
<div class="modal">
    <span data-bind="text: text"></span>
    <a href="#" data-bind="click: close">[X]</a>
</div>
<!-- /ko -->

CSS

.modal {
    background-color: lightgrey;
    padding: 20px
}

JavaScript

var cnt=0;

var ModalViewModel = function() {
    var self = this;
    self.text = ko.observable("Modal #"+ ++cnt);
    self.close = closeModal;
}

function openModal() {
    viewModel.modal(new ModalViewModel());
}
function closeModal() {
    viewModel.modal(null);
}

//Single root viewmodel for entire page
var viewModel = {
    modal: ko.observable(),
    openModal: openModal
};

ko.applyBindings(viewModel); //Applies viewModel to entire page