How can I render HTML with tailwind classes inside .pasteString()?

[ukcw]

<Typewriter
  onInit={(typewriter) => {
    typewriter
      .typeString('Welcome to my site!')
      .pauseFor(100)
      .typeString('<br />')
      .pauseFor(100)
      .typeString("Let's get started...")
      .callFunction((state) => {
        // turn off animation
        state.elements.cursor.style.animation = 'none'
        // hide cursor
        state.elements.cursor.style.display = 'none'
      })
      .pasteString(
        `
      <div className="flex my-6 justify-between">
      <p className="italic">Select a category</p>
      <ul className="space-x-2 items-center">
        <li className="inline-block px-1 py-1 border rounded-md">
          <AiOutlineArrowDown />
        </li>
        <li className="inline-block px-1 py-1 border rounded-md">
          <AiOutlineArrowUp />
        </li>
        <li className="inline-block px-1 py-1 border rounded-md">
          <BsArrowReturnLeft />
        </li>
      </ul>
      </div>
      `,
        null
      )
      .start()
  }}
  options={{
    delay: 60,
  }}
/>

I'm trying to paste an entire div using the .pasteString method but only the div and p are being rendered, the entire ul is being skipped. Is this expected behaviour? As well, the method signature seems to expect a string and a HTMLElement | null as opposed to just a string.

[tomer-tgp]

similar issue here, I have a <table> inside the string I am typing and it strips all the <tr> and <td> and leaves only <table>

I think it can't render nested html elements, and leaves just the parent one

[xuhen]

Is there any solution to skip specific tag eg: table? then, it will keep the childern tag ?