JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Inline HTML is bad - DOMify your html</h3>
<textarea id="content-html">
<ul id="list">
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>
</textarea>
<br>
<input type="button" id="click-me" value="&quot;Serialize&quot;" onclick="textareanode.value = HTMLtoDOMCode( textareanode.value );"/>
<script type="text/javascript">
var opts={jslint_happy:!1,indent_size:4,indent_char:" ",preserve_newlines:!0,preserve_max_newlines:2,brace_style:"end-expand",space_before_conditional:!1,keep_array_indentation:!0,liberal_spacing:!0};
function js_beautify(q,m){function D(b){for(b="undefined"===typeof b?!1:b;j.length&&(" "===j[j.length-1]||j[j.length-1]===A||j[j.length-1]===K||b&&("\n"===j[j.length-1]||"\r"===j[j.length-1]));)j.pop()}function N(){var b=w;w=!1;g();w=b}function g(b){c.eat_next_space=!1;if(!w||!I(c.mode))if(b="undefined"===typeof b?!0:b,c.if_line=!1,D(),j.length){if("\n"!==j[j.length-1]||!b)y=!0,j.push("\n");K&&j.push(K);for(b=0;b<c.indentation_level;b+=1)j.push(A);c.var_line&&c.var_line_reindented&&j.push(A);c.case_body&&
j.push(A)}}function l(){if(c.eat_next_space)c.eat_next_space=!1;else{var b=" ";j.length&&(b=j[j.length-1]);" "!==b&&"\n"!==b&&b!==A&&j.push(" ")}}function p(){y=!1;c.eat_next_space=!1;j.push(e)}function F(){c.indentation_level+=1}function L(){j.length&&j[j.length-1]===A&&j.pop()}function x(b){c&&Q.push(c);c={previous_mode:c?c.mode:"BLOCK",mode:b,var_line:!1,var_line_tainted:!1,var_line_reindented:!1,in_html_comment:!1,if_line:!1,in_case:!1,case_body:!1,eat_next_space:!1,indentation_baseline:-1,indentation_level:c?
c.indentation_level+(c.case_body?1:0)+(c.var_line&&c.var_line_reindented?1:0):0,ternary_depth:0}}function I(b){return"[EXPRESSION]"===b||"[INDENTED-EXPRESSION]"===b}function G(b){return"[EXPRESSION]"===b||"[INDENTED-EXPRESSION]"===b||"(EXPRESSION)"===b}function d(){O="DO_BLOCK"===c.mode;0<Q.length&&(c=Q.pop())}function...

CSS

#content-html {
    width: 800px;
    height: 480px;
    outline: none;
    font-family: Monaco, Consolas, monospace;
    border: 0;
    padding: 15px;
    color: hsl(0, 0%, 27%);
    background-color: #F6F6F6;
}

h3 {
 font-size: 22px;
     font-family: tahoma;
   color: #444444; 
    padding: 5px;
}

JavaScript

window.onload = function() {
    window.textareanode = document.getElementById('content-html');
};