JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/antd.min.css">
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
<div id="app"></div>

CSS

.fff {
  background: #000;
}

.eee {
  background: #eee;
}

.ddd {
  background: #ddd;
}

Babel + JSX

const { Table } = antd

class TableColor extends React.Component {
  constructor (props) {
    super(props)
		
    this.state = {
    	data: []
    }
  }

  componentDidMount() {
  	this.setState({
    	data: [
      	{id:1, name: 'one', color: '#fff'},
        {id:2, name: 'two', color: '#eee'},
        {id:3, name: 'three', color: '#ddd'}
      ]
    })
  }

  render () {
   const columns = [{
      title: 'ID',
      dataIndex: 'id',
    }, {
      title: 'Name',
      dataIndex: 'name',
    }]

    return (
    	<div style={{padding: '20px'}}>
        <Table
          columns={columns}
          rowClassName={(record) => 'red'}
          dataSource={this.state.data}
          rowKey={record => record.id}
        />
     	</div>
    )
  }
}

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