JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div id="root"></div>

CSS

.table {
  background: yellow;
}

.table-cell {
  border: 1px dotted;
  padding: 1em 2em;
}

Babel + JSX

// import TableStyles from './YourTableStyles.css';
const TableStyles = { root: 'table', cell: 'table-cell' }

class Application extends React.Component {
  render() {
    return (
      <div>
        <h1>Example</h1>
        <StatelessTable title="Table Name" styles={TableStyles} />
        <br />
        <StatefullTable title="Table Name" styles={TableStyles} />
      </div>
    );
  }
}

function StatelessTable({ title, styles: s }) {
  return (
    <table className={s.root}>
      <thead className={s.head}>
        <tr className={s.row}>
          <th className={s.cell} colSpan="2">Stateless {title}</th>
        </tr>
      </thead>
      <tbody className={s.body}>
        <tr className={s.row}>
          <td className={s.cell}>Col 1</td>
          <td className={s.cell}>Col 2</td>
        </tr>
      </tbody>
    </table>
  );
}

class StatefullTable extends React.Component {
  render() {
    const { title, styles: s } = this.props;
    return (
      <table className={s.root}>
        <thead className={s.head}>
          <tr className={s.row}>
            <th className={s.cell} colSpan="2">Statefull {title}</th>
          </tr>
        </thead>
        <tbody className={s.body}>
          <tr className={s.row}>
            <td className={s.cell}>Col 1</td>
            <td className={s.cell}>Col 2</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('root'));