JSFiddle - React, Tailwind, and code Playground
HTML
<div id="board">
</div>
CSS
.column {
display: inline-block;
margin: 5px;
}
Babel + JSX
class Board extends React.Component {
createCells(cols) {
const result = [];
for (let i = 0; i < cols; i++) {
result.push(<div key={"col-" + i} className="column">Cell</div>)
}
return result;
}
createBoard(rows, cols) {
const result = [];
for (let i = 0; i < rows; i++) {
result.push(<div key={"row-" + i} className="row">{this.createCells(cols)}</div>)
}
return result;
}
render() {
return (
<div className="board">
{ this.createBoard(3, 3) }
</div>
)
}
}
React.render(<Board/>, document.getElementById('board'))