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

CSS

body {
  padding: 10px 0;
}

Babel + JSX

class Error extends React.Component {
	render() {
  	let errorStyle = {backgroundColor: 'red', padding: '10px', color: '#fff', borderRadius: '10px'};
  
  	return (
    	<span className="component-error" style={errorStyle}>
         <strong>Error:</strong> {this.props.message}
      </span>
    );
  }
}

ReactDOM.render(
  <Error message="Damn, you have no admin rights!"/>,
  document.getElementById('error')
);