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="myapp"></div>

CSS

.component-myapp {
  transition: background 300ms ease-in;
  display: inline-block;
  padding: 10px;
  font-family: Arial, sans-serif;
  background: #ccc;
  cursor: pointer;
}

Babel + JSX

class MyApp extends React.Component {
	constructor() {
  	super();
    
    this.state = {
    	isHovering: false
    };
  }
  
  isHovering() {
  	return this.state.isHovering;
  }

	render() {
  	let myAppStyle = (this.isHovering()) ? {background: 'red', color: '#fff'} : {};
  
  	return (
    	<div className="component-myapp" style={myAppStyle}
           onMouseEnter={() => this.handleOnMouseEnter()}
           onMouseLeave={() => this.handleOnMouseLeave()}>
        My First App!
      </div>
    );
  }
  
  handleOnMouseEnter() {
  	this.setState({isHovering: true});
  }
  
  handleOnMouseLeave() {
  	this.setState({isHovering: false});
  }
};

ReactDOM.render(
  <MyApp/>,
  document.getElementById('myapp')
);