JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div >
        <span>HTML</span>
        <code class="language-html" style="border-color: orange;"></code>
      </div>

      <div>
        <span>CSS</span>
        <code class="language-css"  style="border-color: blue;"></code>
      </div>

      <div>
        <span>JS</span>
        <code class="language-js" style="border-color: yellow;"></code>
      </div>
    </div>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

    <script src="./script.js"></script>
  </body>
</html>

CSS

body {
  --gap: 2vmin;
  margin: 0;
  height: 100vh;
}

#container {
  display: flex;
  height: 100%;
  gap: var(--gap);
  padding: var(--gap);
  box-sizing: border-box;
}

#container > * {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
}

code {
  overflow: auto;
  white-space: pre;
  border: 0.2rem solid;
	border-radius: 0.5rem;
}

JavaScript

let inputs = document.querySelectorAll("textarea");
let langs = ["html", "css", "javascript"];

let outputs = document.querySelectorAll("code");

outputs.forEach((code, index) => {
  // ✅ make it like input 
  code.contentEditable = "true";
  // ✅ if there is some code from localStorage we add it to the website.
  code.innerHTML = localStorage.getItem(`${langs[index]}`) || "";
  // ✅ styling of your library (work great when app start)
  hljs.highlightElement(code);

  code.addEventListener("input", () => {
    localStorage.setItem(`${langs[index]}`, code.innerHTML);
    // ❌ why the typing is reversed here?
    // if the next line isn't there then it work fine, otherwise it will change the values to reversed
    hljs.highlightElement(code);

    // console.log
    // example to type <div></div>
    // what I get >vid/<>vid<
  });
});