JSFiddle - React, Tailwind, and code Playground

by Jason Miller

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.2.9/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script>
<script src="https://npmcdn.com/preact-compat@latest"></script>

Babel + JSX

let ReactDOM = preactCompat,
	React = preactCompat;

class Foo extends React.Component {
	propTypes = {
		bar: React.PropTypes.bool.isRequired,
		theme: React.PropTypes.shape({
      color: React.PropTypes.string.isRequired,
      fontSize: React.PropTypes.number
    })
	};
	render() {
		let { theme, bar, children } = this.props;
		return <h2 style={theme} bar={bar}>{ children }</h2>;
	}
}

ReactDOM.render((
	<div>
		<Foo bar={true} theme={{ color:'green' }}>Demo</Foo>
	</div>
), document.body);