demos: Add setup for plain js demos (#2288)

* add basic js demo

* improve js demos

* change demo button

* fix js demos on build

* add tailwind experiment

* docs: replace tailwind demo

Co-authored-by: Philipp Kühn <philippkuehn@MacBook-Pro-von-Philipp.local>

demos/src/Experiments/Tailwind/JS/index.html

@@ -0,0 +1,54 @@
+<!-- load tailwind -->
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography/dist/typography.min.css" />
+
+<!-- provide element -->
+<div class="element"></div>
+
+<!-- create editor -->
+<script type="module">
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+
+const editor = new Editor({
+  element: document.querySelector('.element'),
+  extensions: [
+    StarterKit,
+  ],
+  editorProps: {
+    attributes: {
+      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
+    },
+  },
+  content: `
+    <h2>
+      Hi there,
+    </h2>
+    <p>
+      this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+    </p>
+    <ul>
+      <li>
+        That’s a bullet list with one …
+      </li>
+      <li>
+        … or two list items.
+      </li>
+    </ul>
+    <p>
+      Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+    </p>
+<pre><code class="language-css">body {
+  display: none;
+}</code></pre>
+    <p>
+      I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+    </p>
+    <blockquote>
+      Wow, that’s amazing. Good work, boy! 👏
+      <br />
+      — Mom
+    </blockquote>
+  `,
+})
+</script>