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>

SCSS

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

Babel + JSX

const globalState = {
	title: 'to increment'
};

let businessLogic = {
	count: (value) => {
  	globalState.counter = value;
    render();
  }
};

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

	render() {
  	let hoverClass = (this.isHovering()) ? 'is-hovering' : '';
  
  	return (
    	<div className={'component-myapp ' + hoverClass}
           onMouseEnter={() => this.handleOnMouseEnter()}
           onMouseLeave={() => this.handleOnMouseLeave()}>
        
        {this.props.title}
      </div>
    );
  }
  
  handleOnMouseEnter() {
  	this.setState({isHovering: true});
  }
  
  handleOnMouseLeave() {
  	this.setState({isHovering: false});
  }
};

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