JSFiddle - React, Tailwind, and code Playground

HTML

<p> Hello World. </p>

<div id="target"></div>

<p> Goodbye World. </p>

CSS

body {
    background: #EFF;
    font-family: sans-serif;
    color: #A40;
}

JavaScript

// Displays specified HTML source in an iframe, sandboxed if possible.
// Be aware that the iframe's contents will be cleared if it is moved in the DOM.
// We use this approach instead of a data URL because this is on the same origin,
// allowing us to look at the content's height and adjust the frame to fit.

var appendSandboxed = function(target, source) {
    var sandbox = $("<iframe sandbox='allow-same-origin'></iframe>");
    sandbox.appendTo(target);
    var win = sandbox[0].contentWindow;
    win.document.open();
    win.document.write("<!doctype html><html><body>");
    win.document.close();
    win.document.body.style.margin = "0";
    var wrapper = win.document.createElement("div");    
    wrapper.innerHTML = source;
    win.document.body.appendChild(wrapper);
    sandbox.css({
        display: "block",
        width: "100%",
        border: "0"
    });


    
    sandbox.css("height", wrapper.scrollHeight +
               parseInt(win.getComputedStyle(win.document.body).marginTop , 10) * 2 + "px");
}


    appendSandboxed(document.getElementById("target"),
                    "<noscript>No</noscript> XSS from <i>out of this <b>world</b></i><script>alert('xss');<\/script>");