JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div id="input">
  <h3>Main content</h3>
  <textarea id="main">Main content</textarea>
  
  <h3>Sidebar content</h3>
  <textarea id="aside"><span style="color: gray; font-style: italic;">Notes on the side</span></textarea>
</div>

<div id="preview"></div>
<textarea id="code" readonly></textarea>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "input preview"
    "input code";
}

#input {
  grid-area: input;
  padding: 16px;
  background: #ddd;
}

h3 {
  margin: 0;
}

#input textarea {
  display: block;
  width: 100%;
  height: 120px;
  margin-bottom: 16px;
}

#preview {
  grid-area: preview;
  overflow-y: auto;
}
#code {
  grid-area: code;
  background: #eee;
  border: none;
  padding: 16px;
}

JavaScript

const main = document.querySelector("#main");
const aside = document.querySelector("#aside");

const code = document.querySelector("#code");
const preview = document.querySelector("#preview");

function indent(str, size) {
	return str.split("\n").map(line => " ".repeat(size) + line).join("\n");
}

function updateCode() {
	const codeString =
`<table style="width: 100%;" border="0">
  <tbody>
    <tr>
      <td style="width: 75%;">
${indent(main.value, 8)}
      </td>
      <td style="width: 25%; vertical-align: top; padding: 16px;">
${indent(aside.value, 8)}
      </td>
    </tr>
  </tbody>
</table>`;

	code.value = codeString;
  preview.innerHTML = codeString;
}

main.addEventListener("input", updateCode);
aside.addEventListener("input", updateCode);

updateCode();