JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<table id="hi">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>
<!-- ko foreach: $root.people -->
    <!--ko if: $data.middlename -->
    <table>
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Middle name</th>
            </tr>
        </thead>
            <tr>
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
                <td data-bind="text: middlename"></td>
            </tr>
    </table>
    <!-- /ko -->
<!-- /ko -->

CSS

.green {
    color:green;
}

JavaScript

var x = {
    people: [{
        firstName: 'Bert',
        lastName: 'Bertington',
        middlename : 'hello'
    }, {
        firstName: 'Charles',
        lastName: 'Charlesforth'
    }, {
        firstName: 'Denise',
        lastName: 'Dentiste'
    }]
};
ko.applyBindings(x);