JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://frzr.js.org/frzr.min.js"></script>

CSS

thead {
  font-weight: 600;
}

Babel + JSX

var { el, list, mount } = frzr;

class Table {
  constructor (key) {
    this.el = el('table',
      el('thead', this.thead = list(Tr)),
      el('tbody', this.tbody = list(Tr, key))
    )
  }
  update (data) {
    this.thead.update(data.head);
    this.tbody.update(data.body);
  }
}
class Tr {
  constructor () {
    this.el = el('tr',
      this.tds = list(Td)
    );
  }
  update (data) {
    this.tds.update(data);
  }
}
class Td {
  constructor () {
    this.el = el('td');
  }
  update (data) {
    this.el.textContent = data;
  }
}

var table = el(Table);
table.update({
  head: [['A', 'B', 'C']],
  body: [
  	[1, 2, 3], 
    [4, 5, 6]
  ]
});
mount(document.body, table);