JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<table>
    <tbody data-bind="template: { name: 'rowTmpl', foreach: runners }">
    </tbody>
</table>
<script id="rowTmpl" type="text/html">
    <tr data-bind="template: { name: 'colTmpl', foreach: radios }" >
        <td data-bind="text: name"></td>
        <td data-bind="text: club"></td>
    </tr>
</script>
<script id="colTmpl" type="text/html">
        <td>aa</td>
</script>

CSS

td{
    border: solid 1px black;
}

JavaScript

var vm = {
            id: 1,
            name: 'H21',
            radios: ['2km', '4km', 'mål'],
            runners: ko.observableArray([
                { name: 'Mikael Eliasson', club: 'Göteborg-Majorna OK', radios: ko.observableArray([{}, {}, {}]) },
                { name: 'Ola Martner', club: 'Göteborg-Majorna OK', radios: ko.observableArray([{}, {}, {}]) }
            ])
        };

        ko.applyBindings(vm);