JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="http://brigand.github.io/knockout-semantic/lib/knockout-min.js"></script>
<script src="http://brigand.github.io/knockout-semantic/lib/knockout-es5.min.js"></script>
<script src="http://brigand.github.io/knockout-semantic/build/knockout-semantic.js"></script>
<div class="ui modal sample" data-bind="modal: myModal"></div>
<div class="ui button" data-bind="click: showModal">Show the Modal</div>

<!-- This would also work -->
<!-- ko if: false -->
<sui-modal data="myModal"></sui-modal>
<!-- /ko -->

CSS

html, body {
    height: 100%;
}
html, body {
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
}

JavaScript

viewModel = {
    myModal: {
        title: 'My Modal',
        content: 'I am a <strong>MODAL!!!</strong>',
        show: false/*,
        buttons: [
        new semantic.Action("Close me with jQuery", function () {
            $(this).modal("hide dimmer");
        }), new semantic.Action("Close me by setting show to false", function () {
            viewModel.myModal.show = false;
        })]*/
    },
    showModal: function(){
        viewModel.myModal.show = true;
    }
};

ko.track(viewModel.myModal);
ko.track(viewModel);
ko.applyBindings(viewModel);