JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://archwomen.org/blog/submit/markdown.js"></script>
<form name="submit" action="save.php" method="post">
<table>
<tr>
    <td>Post Body:</td>
    <td></td>								   
    <td>Preview:</td>
 	<td><button type="button" onclick=" " >Live</button>
        <button type="button" value="transform" id="tooo">Html</button>
		<input type="submit" value=" Save ">
    </td>
</tr>
<tr>
     <td colspan="2"><textarea rows="25" cols="25" name="comment" id="text-input" oninput="this.editor.update()">
Headers

## This is an <h2> tag
### This is an <h3> tag
#### This is an <h4> tag

= Text styles =

*This text will be italic*

_This will also be italic_

**This text will be bold**

__This will also be bold__

*You **can** combine them*
        </textarea></td>
        <td colspan="2" style="vertical-align: top"> <div style="padding-left:20px;" id="preview"></div></td>
</tr>
</table>
</form>

JavaScript

function Editor(input, preview) {
    this.update = function () {
        preview.innerHTML = markdown.toHTML(input.value);
    };
    input.editor = this;
        this.update();
}
var $ = function (id) { 
    return document.getElementById(id); 
};
new Editor($("text-input"), $("preview"));

btn = document.getElementById('tooo');
btn.onclick = function transformTag() {
    var elem = document.getElementById('preview');
    var edited_area = document.getElementById('text-input');
    var parent = elem.parentNode;
    var newNode = document.createElement("textarea");
    newNode.rows = 25
    newNode.cols = 25
    newNode.readOnly = true
    newNode.value = edited_area.value
    parent.replaceChild(newNode,elem);
}