JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<table id="tk-table69" class="tk-table" style="width: 300px;">
    <thead>
        <tr>
            <th>Online</th>
            <th>Nome</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: data">
        <tr data-bind="css: {'hilight': $index() % 2 === 0}">
            <td><p data-bind="text: online"></p></td>
            <td><p data-bind="text: name"></p></td>
            <td><p data-bind="text: email"></p></td>
        </tr>
    </tbody>
</table>
<div id='x'></div>

CSS

.tk-table {
    width: 100%;
    margin: 4px;
    border: 1px solid #aeaeae;
}
.tk-table thead tr {
    height: 15px;
    font-size: 11px;
    text-align: left;
    color: #40464b;
}
.tk-table thead tr th {
    padding-left: 3px;
    border-left: 1px solid #aeaeae;
    border-bottom: 1px solid #aeaeae;
}
.tk-table tbody tr {
    border-bottom: 1px solid #e6e6e6;
    padding: 3px 0 3px 3px;
    vertical-align: middle;
}
.tk-table tbody tr td {
    border-left: 1px solid #e6e6e6;
    padding: 3px 0 3px 3px;
    vertical-align: middle;
    font-size: 12px;
}
.tk-table tbody tr td p {
    margin: 0;
}
.tk-table tbody tr:hover {
    background: #b8d6ff;
}
.hilight {
    background: #eaeded;
}

JavaScript

var ClientModel = function () {
    var self = this;
    self.data = ko.observableArray([{
        name: 'Razer',
        email: 'razeraj.com',
        site: 'razer.com',
        online: 1
    }, {
        name: 'Bitfenix',
        email: 'bitfenix@gmail.com',
        site: 'bitfenix.com',
        online: 0
    }, {
        name: 'Thermaltake',
        email: 'thermal@gmail.com',
        site: 'thermaltake.com',
        online: 1
    }, {
        name: 'Lian-li',
        email: 'lianli@gmail.com',
        site: 'lianli.com',
        online: 0
    }]);
};

ko.applyBindings(new ClientModel());