JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="editor" cols="50" rows="20" placeholder="Enter Text Here!"></textarea>
<div id="preview"></div>

CSS

body {
    font-family: Calibri;
}
#editor {
    width: 90%;
    font-family: inherit;
    font-size: 1em;
    position: relative;
    height: 300px;
}
#preview {
    width: 90%;
    min-height: 5em;
    border: 1px solid black;
    position: relative;
}
#preview:before {
    position: absolute;
    content: "Preview";
    top: 5px;
    right: 5px;
}

JavaScript

function encodeInput(editor) {
    theText = editor.val();
    theText = theText.replace(/\*\*\*(.*?)\*\*\*/, '<strong><i>$1</i></strong>', 'g');
    theText = theText.replace(/\*\*(.*?)\*\*/, '<strong>$1</strong>', 'g');
    theText = theText.replace(/\*(.*?)\*/, '<i>$1</i>', 'g');
    console.log(theText);
    $('#preview').html(theText);
}

$(function() {
    $editor = $('#editor');
    $editor.keypress(function() {
        encodeInput($(this));
    });
});