JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<a class="btn btn-success btn-sm" data-toggle="modal" href="#basicModal">open modal</a>

<table class="table table-striped">
    <thead>
    <tr>
        <th>Customer</th>
        <th>Proposal No.</th>
        <th>Status</th>
        <th>&nbsp;</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: proposals">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: propnum"></td>
            <td data-bind="text: status"></td>
            <td> <i class="icon-pencil" title="Edit quotation"></i>
 <i class="icon-eye-open" name="View details"></i>
                <a data-bind="click: $parent.printdocs, visible: approved" title="Print documents"><i class="icon-print"></i></a>
            </td>
        </tr>
    </tbody>
</table>
<div class="modal fade" tabindex="-1" role="dialog" data-bind="modal:editing">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" data-bind="click: saveprint">Save & print</a>
                <a class="" data-dismiss="modal">Cancel</a>
                
        </div>
    </div>
  </div>
</div>

CSS

body {
    font-family: arial;
    font-size: 14px;
}
.liveExample {
    padding: 1em;
    background-color: #EEEEDD;
    border: 1px solid #CCC;
    max-width: 655px;
}
.liveExample input {
    font-family: Arial;
}
.liveExample b {
    font-weight: bold;
}
.liveExample p {
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}
.liveExample select[multiple] {
    width: 100%;
    height: 8em;
}
.liveExample h2 {
    margin-top: 0.4em;
    font-weight: bold;
    font-size: 1.2em;
}

JavaScript

var data = [{
    "name": "Colette Kramer",
        "propnum": 44150000049,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Jeanette Petty",
        "propnum": 44150000031,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Carissa Carson",
        "propnum": 44150000047,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Ishmael Alvarez",
        "propnum": 44150000019,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Carla Frost",
        "propnum": 44150000014,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Cora Whitaker",
        "propnum": 44150000028,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "May Bartlett",
        "propnum": 44150000021,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Adrian Diaz",
        "propnum": 44150000017,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Brielle Mckenzie",
        "propnum": 44150000030,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Mona Gilbert",
        "propnum": 44150000028,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Ivy Ellis",
        "propnum": 44150000020,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Molly Booth",
        "propnum": 44150000049,
        "status": "Approved",
        "approved": "1"
}, {
    "name": "Danielle Guzman",
        "propnum": 44150000035,
        "status": "Generating docs",
        "approved": ""
}];

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });
        
        var value = valueAccessor();
        if (typeof value === 'function') {
            $(element).on('hide.bs.modal', function() {
               value(false);
            });
        }
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      ...