JSFiddle - React, Tailwind, and code Playground

by Peer Reynders

HTML

<div id="app"></div>

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
Babel.registerPreset("my-preset", {
  presets: [
    [Babel.availablePresets["env"], { "loose": true }],
  ],
  plugins: [
    [Babel.availablePlugins["@babel/plugin-proposal-private-methods"], { "loose": true }]
  ],
  moduleId: "main"
});
</script>
<script type="text/babel" data-type="module" data-preset="my-preset">


const renderLog = (text) => <textarea value={text} />;

  
class App extends React.Component {
  render() {
    const that = this;
    return <>
      <button id="elem">Click me!</button> 
      </>;
  }
  
  handleEvent(e) {
     console.log("hi");
  }
};

ReactDOM.render(
  <App name = "John" / > ,
  document.getElementById('app')
);
</script>