How to make TipTap editor show in browser?

I'm trying to include TipTap editor in my laravel project; and I can't seem to get the editor (buttons, menus etc.) to show up. The content defined in JS does show up; but the editor itself doesn't.

I wish to know how are you using TipTap in your projects; and how are you styling it with Tailwind. Here's my specific requirement -

1. The content should be rendered using Tailwind's Typography plugin (I can do this)
2. Style the editor menus, buttons etc.?

Here's how my editor is being rendered -

/* TIP-TAP Editor */
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>
  `,
})