JSFiddle - React, Tailwind, and code Playground

by Jason Miller

HTML

<form method="post" action="http://jsfiddle.net/api/post/library/pure/" target="top">
    <input type="submit" value="Create Fiddle" />
    <input type="hidden" name="resources" value="https://npmcdn.com/preact@latest/dist/preact.js" />
    <input type="hidden" name="wrap" value="b" />
    <input type="hidden" name="panel_js" value="3" />
    <input type="hidden" name="panel_css" value="1" />
    <textarea name="js">/** @jsx h */
const { h, render, Component, hooks, options } = preact;

class App extends Component {
	render() {
		return (
			<div id="app">
				<Header />
				<Main />
			</div>
		);
	}
}

class Header extends Component {
	render() {
		return (
			<header>
				<h1>App</h1>
			</header>
		);
	}
}

class Main extends Component {
	render() {
		let items = [1,2,3,4,5].map( item => (
            <li id={ item }>{ 'Item '+item }</li>
		));
		return (
			<main>
				<ul>{ items }</ul>
			</main>
		);
	}
}

render(<App />, document.body);</textarea>
</form>

CSS

input[type="submit"] {
    display: block;
    margin: 20px auto;
    background: #EEE;
    color: #333;
    padding: 20px 40px;
    font-size: 30px;
    border: 1px solid #888;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),
                0 1px 2px rgba(0,0,0,0.3);
}

textarea {
    display: block;
    margin: 10px auto;
    padding: 5px;
    width: 90%;
    height: 20em;
    background: #FAFAFA;
    border: 1px solid #DDD;
    color: #888;
    font: 11px/1.21 monospace;
}

JavaScript

//document.querySelector('form').submit();