JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="button"></div>

CSS

body {
  padding: 20px;
}

button {
  padding: 5px 10px;
}

Babel + JSX

class Button extends React.Component {
	render() {
  	let buttonStyle = {color: this.props.color || '#000'};
  	return <button style={buttonStyle} onClick={() => this.handleOnClick()}>{this.props.content}</button>;
  }
  
  handleOnClick() {
  	if(!this.props.onClickHandler) {
    	return;
    }
    
		this.props.onClickHandler();
  }
};

ReactDOM.render(
  <Button content="Button" color="black"/>,
  document.getElementById('button')
);