JSFiddle - React, Tailwind, and code Playground

by Jason Miller

HTML

<script src="https://unpkg.com/preact/dist/preact.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/preact-shadow-root.umd.js"></script>
<script src="https://cdn.rawgit.com/developit/a60ee5af1c246a2b5535/raw/988b7d5bc680dfdd23fc1bee53e3abc4e5c5d6e2/linky.js?repo=developit/preact-shadow-root"></script>

CSS

html, body {
  font: 16px/1.3 'Helvetica Neue',arial,sans-serif;
}
.some-class {
  margin: 5px;
  padding: 5px;
  border: 2px solid blue;
  background: #eee;
}

Babel + JSX

/** @jsx preact.h */

const MyComponent = () => (
	<div class="some-class">
    <Shadow>
      <div class="some-class">
        <h1>My Component</h1>
        <style>{`
        	div {
          	background: white;
          }
          .some-class {
            margin: 5px;
            padding: 5px;
            border: 2px solid red;
          }
        `}</style>
      </div>
    </Shadow>
  </div>
);

preact.render(<MyComponent />, document.body);