JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae vehicula neque. Praesent porttitor magna non neque tincidunt egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris bibendum ultrices sem, ac suscipit ante semper vitae. Nulla facilisi. Quisque viverra est in viverra blandit. Suspendisse gravida pulvinar interdum. Integer tempor lectus non lorem cursus tristique. Nunc id hendrerit felis. Mauris leo urna, tempus sit amet diam quis, sagittis viverra elit. Nunc cursus venenatis nulla sed porttitor. Mauris ut massa eu velit venenatis imperdiet at id est. Pellentesque semper imperdiet cursus. In in ante tincidunt justo elementum molestie. Nam blandit enim diam, ac euismod leo sagittis nec. Aenean vitae tristique nulla.</p>

CSS

body {
  margin: 0;
  padding: 8px 16px;
  background-color: transparent;
}
iframe {
  background-color: transparent;
}
/* Disable margin overflow */
body::before, body::after {
  content: "";
  display: table;
}
body.inner {
  margin: 0;
  padding: 0;
}
p {
  padding: 8px 0;
  margin: 0;
}
iframe {
  display: block;
  width: 100%;
  height: 100px;
  border: 0;
}

JavaScript

let iframe = document.createElement('iframe');
let text = document.querySelector('p').innerText;
let cssText = document.querySelector('head style').innerText;
iframe.onload = () => {
	let window = iframe.contentWindow;
  let document = window.document;
  // Tag the body of the iframe so we can target it with CSS.
  document.body.classList.add('inner');
  let p = document.createElement('p');
  p.appendChild(document.createTextNode(text));
  document.body.appendChild(p);
  let style = document.createElement('style');
  style.appendChild(document.createTextNode(cssText));
  document.head.appendChild(style);
  let height = document.body.offsetHeight;
  iframe.style.height = height + 'px';
};
iframe.id = 'inner-iframe-for-demo';
iframe.src = 'about:blank';
iframe.scrolling = 'no';
document.body.appendChild(iframe);
document.body.classList.add('outer');