JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Live Editor</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700;900&display=swap" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.js"></script>
</head>
<body>
    <div class="le-header">live editor by emilie <button class="le-click" onclick="getDOHTML()">copy dohtml</button></div>
    <div class="le-wrap">
        <div class="le-result">
            <iframe id="le-preview" src="">
            <!DOCTYPE html><html>
            <head>
            </head>
            <body>
            </body>
            </html>
            </iframe>
        </div>
        <div class="le-code">
            <button class="le-tit">HTML</button>
            <div class="le-pannel">
                <textarea id="le-html" rows="4" cols="70"><div id="html">test html</div>
<div id="css">test css</div>
<div id="js">test js</div></textarea>
            </div>
            <button class="le-tit">CSS</button>
            <div class="le-pannel">
                <textarea id="le-css" rows="" cols="70">#css {color:red}</textarea>
            </div>
            <button class="le-tit">JavaScript / JQuery</button>
            <div class="le-pannel">
                <textarea id="le-js" rows="6" cols="70">
var iframehtml=document.getElementById("js").innerHTML;
alert(iframehtml);

 </textarea>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>

JavaScript

function getDOHTML() {
 
        var html = document.getElementById("le-html").value;
        var css = document.getElementById("le-css").value;

        var js = document.getElementById("le-js").value;
 
var copyText="[dohtml]<center><style>" + css + "</style><html>" + html + "<\/html><script>" + js + "<\/script></center>[dohtml]";


var doc = document.getElementById('le-preview').contentWindow.document;
doc.open();
doc.write(copyText);
doc.close();

  alert("Created + Copied DOHTML: " + copyText);
}