JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">
Multiline text
<br />
Multiline
<br />
Text
</div>

CSS

body {
  background-color: white;
  margin: 0;
}

body > div {
  background-color: black;
  color: white;
  font-family: Monospace;
  padding: 0.5rem;
  width: 20rem;
}

JavaScript

const div = document.querySelector('div')

div.addEventListener('input', () => {
    let text = div.textContent
    text = '<span>' + text.replace(/ /g, '</span> <span>').replace(/\n/g, '</span><br /><span>') + '</span>'
    div.innerHTML = text
})