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>Editor</title>
  </head>

  <body>
    <div id="page_container">
      <div id="left_pane">
        <div id="editor_controls">
          <button onclick="preview()">Preview</button>
          <button onclick="insertTag('strong')">BOLD</button>
          <button onclick="insertTag('italic')">ITALIC</button>
          <button onclick="insertTag('underline')">UNDERLINE</button>
          <button onclick="insertTag('code')">CODE</button>
        </div>
        <textarea id="editor_textarea" placeholder="Type in your text here"></textarea>
      </div>

      <div id="right_pane"></div>
    </div>

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

</html>

CSS

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
}

#page_container{
    height: 100%;
    display: flex;
    flex-direction: row;
}

#left_pane, #right_pane{
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid grey;
}

#editor_textarea{
    flex: 1;
    font-size: 18px;
    resize: none;
}

code-tag{
    background-color: grey;
    color: white;
    border: 2px solid black;
    padding: 8px 8px;
}

JavaScript

function insertTag(tag_name) {

  let editor_textarea = document.getElementById("editor_textarea");

  let selection = null;

  if (editor_textarea.selectionStart == editor_textarea.selectionEnd)
    selection = editor_textarea.selectionStart;
  else
    selection = editor_textarea.value.slice(editor_textarea.selectionStart, editor_textarea.selectionEnd);

  switch (tag_name) {
    case "strong":
      tag_name = "strong";
      break;

    case "italic":
      tag_name = "i";
      break;

    case "underline":
      tag_name = "u";
      break;

    case "code":
      tag_name = "code-tag";
      break;

    default:
      tag_name = null;
      break;
  }

  if (tag_name != null)
    editor_textarea.setRangeText(`<${tag_name}>${selection}</${tag_name}>`);
}

function preview() {
  let text_to_render = document.getElementById("editor_textarea").value;

  text_to_render = text_to_render.replace(/\n/g, "<br>");

  text_to_render = text_to_render.replace(/<script>/g, "");
  text_to_render = text_to_render.replace(/<\/script>/g, "");

  text_to_render = text_to_render.replace(/<link>/g, "");
  text_to_render = text_to_render.replace(/<\/link>/g, "");

  text_to_render = text_to_render.replace(/<div>/g, "");
  text_to_render = text_to_render.replace(/<\/div>/g, "");

  text_to_render = text_to_render.replace(/<p>/g, "");
  text_to_render = text_to_render.replace(/<\/p>/g, "");

  text_to_render = text_to_render.replace(/<span>/g, "");
  text_to_render = text_to_render.replace(/<\/span>/g, "");

  text_to_render = text_to_render.replace(/<style>/g, "");
  text_to_render = text_to_render.replace(/<\/style>/g, "");

  let render_div = document.getElementById("right_pane");

  render_div.innerHTML = text_to_render;
}

class Code extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define("code-tag", Code);