JSFiddle - React, Tailwind, and code Playground

by jfroom

HTML

<div class='segs'></div>
<button class='add-seg-row'>Add seg row</button>
<button class='add-seg-col'>Add seg col</button><br/>
<button class='add-subdiv-row'>Add subdiv row</button>
<button class='add-subdiv-col'>Add subdiv col</button>

SCSS

.segs {
  display: table;
  border-collapse: collapse;
  width: 400px;
  height: 200px;
}
.seg-row {
  display: table-row;
}
.seg-cell {
  display: table-cell;
  border: 4px solid black;
}
.subdivs {
  display: table;
  border-collapse: collapse;
}
.subdiv-row {
  display: table-row;
}
.subdiv-cell {
  display: table-cell;
  border-right: 4px dotted grey;
}

CoffeeScript

segRows = 1
segCols = 1
subdivRows = 1
subdivCols = 1

render = ->
	o = ""
  for _ in [0...segRows]
		o += "<div class='seg-row'>"
    for _ in [0...segCols]
    	o += "<div class='seg-cell'><div class='subdivs'>"
      for _ in [0...subdivRows]
      	o += "<div class='subdiv-row'>"
        for _ in [0...subdivCols]
        	o += "<div class='subdiv-cell'></div>"
        O += "</div>"
  		O += "</div></div>"
    O += "</div>"
	$('.segs').html o
  
$('.add-seg-row').on 'click', -> 
	segRows ++
  render()