JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<body>
<div id="type-output">Click on a picture to see the type!</div>
<div id="observablehq-viewof-rects-1600ec6b"></div>
<p>Credit: <a href="https://observablehq.com/d/73c68590a6b8ba4c"> by Mathew Brown</a></p>

<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/d/73c68590a6b8ba4c.js?v=3";
new Runtime().module(define, name => {
  if (name === "viewof rects") return new Inspector(document.querySelector("#observablehq-viewof-rects-1600ec6b"));
  if (name === "type"){
    const node = document.querySelector("#type-output");
    return {
      pending() {
      },
      fulfilled(value) {
        node.innerText = value;
      },
      rejected(error) {
        node.textContent = error.message;
      }
  }}
});
</script>

</body>
</html>