JSFiddle - React, Tailwind, and code Playground

by redky

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

SCSS

table {
  border: 1px solid #eee;
  border-collapse: collapse
}

td {
  border: 1px solid #eee;
  padding: 0 8px;
}

#app {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.grid {
  margin: 8px;
}

.queue {
  background-color: #111;
  color: #fff;
}

Babel + JSX

const { Component } = React;

class Line extends Component {
	render () {
  	return (
    	<tr>
    	  { 
          this.props.list.map((item, index) => {
            return <td key={index} className={item === 1 ? 'queue' : 'default'}>{item}</td>
          })
				}
    	</tr>
    )
  }
}

class Table extends Component {
	render () {
  	return (
      <div className="grid">
        <table>
          <tbody>
            {
              this.props.list.map((item, index) => {
                const list = [0, 0, 0, 0, 0, 0, 0, 0]
                list[item] = 1
                return <Line key={index} list={list}></Line>
              })
            }
          </tbody>
        </table>
      </div>
    )
  }
}

class App extends Component {
	constructor () {
  	super()
    this.state = {
    	list: []
    }
  }
	componentDidMount () {
    function queue(n) {
      var q = []
      var r = []

      function check (t) {
        for (var i = 0; i < t; ++i) {
          if (
            q[i] === q[t] || 
            (t - i) === Math.abs(q[t] - q[i])
          ) {
            return false
          }
        }
        return true
      }

      function _queue(line) {
        if (line >= n) {
          var _r = []
          for (var i = 0; i < n; ++i) {
            _r.push(q[i])
          }
          r.push(_r)
        } else {
          for (var col = 0; col < n; ++col) {
            q[line] = col
            if (check(line)) {
              _queue(line + 1)
            }
          }
        }
      }

      _queue(0, n)
      return r
    }

    var list = queue(8)
    this.setState(prev => {
    	return {
      	list: list.slice(0)
      }
    })
  }
	render () {
  	return (
    	<React.Fragment>
        {
          this.state.list.map((item, index) => {
            return <Table list={item} key={index}></Table>
          })
        }
      </React.Fragment>
    )
  }
}

ReactDOM.render(
	<App />,
  document.querySelector('#app')
)