JSFiddle - React, Tailwind, and code Playground

by pablodarde

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

table td {
  border: 1px solid red;
}

Babel + JSX

class Dungeon extends React.Component {
  constructor(props) {
  	super(props);
    this.inputListener = this.inputListener.bind(this);
  }
  
  inputListener(event) {
  	const key = event.keyCode;
    if (key === 40) {
    	alert("Arrow down pressed!");
    }
	}
  
	render() {
		return(
    	<div>
        <ol>
          <li>Click in this area</li>
          <li>Press TAB to select the table</li>
          <li>Press ARROW DOWN</li>
        </ol>
    	  <table tabIndex="0" onKeyDown={this.inputListener}>
          <tr>
            <td>column A</td>
            <td>column B</td>
          </tr>
        </table>
    	</div>
     )
   }        
}

React.render(<Dungeon />, document.getElementById('container'));