JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <table class="ui celled table segment">
        <thead>
            <tr>
                {{#headers}}
                <th>{{this}}</th>
                {{/headers}}
            </tr>
        </thead>
 
        <tbody>
        {{#result:i}}
        <tr>
            {{#headers:h}}
            <td>{{result[i][headers[h]]}}{{h}}</td> 
            {{/headers}}
        </tr>
        {{/result}}
        </tbody>
    </table>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        headers:['head1','head2'],
        result:[
            {head1:'content1',head2:'content2'},
            {head1:'content3',head2:'content4'},
            {head1:'content5',head2:'content6'}
        ]
    }
});