<style>
  body {
    display: flex;
    flex-direction: column;
  }
  #root {
    flex: 1;
  }
  script[contenteditable] {
    display: block;
    overflow: auto;
    white-space: pre;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    caret-color: black;
    flex: 0 0 280px;
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/nostalgie@0.39.1/dist/index.umd.js"></script>

<div id="root">Loading...</div>
<script
  contenteditable
  type="velcro"
  data-dependencies="react:^16.13.1, react-dom:^16.13.1, github-markdown-css: ^4.0.0"
>
  import React from 'react';
  import { render } from 'react-dom';
  import 'github-markdown-css';

  render(
    <div className="markdown-body">
      <h1>The smallest ever React REPL</h1>
      <p>With <code>jsx</code>, <code>ES modules</code> and ✨.</p>
      <p>Try editing the code below. It is literally the script tag as a <code>contenteditable</code>.</p>
    </div>,
    document.getElementById('root')
  );
</script>