JSFiddle - React, Tailwind, and code Playground

HTML

<code contenteditable="true" id="test">Here is some editable text</code>

JavaScript

$(document).ready(function(){

$('code').keydown(function(e) {
    var keycode   = (e.keyCode ? e.keyCode : e.which);
    if (keycode == 9){
    insertTextAtCursor("\t");
    e.preventDefault();
    e.stopPropagation();
    return false;
    } 
});
 
  
function insertTextAtCursor(text) {
    var node = document.createTextNode(text);
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
            range = range.cloneRange();
            range.selectNodeContents(node);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var html = (node.nodeType == 1) ? node.outerHTML : node.data;
        var id = "marker_" + ("" + Math.random()).slice(2);
        html += '<span id="' + id + '"></span>';
        var textRange = document.selection.createRange();
        textRange.collapse(false);
        textRange.pasteHTML(html);
        var markerSpan = document.getElementById(id);
        textRange.moveToElementText(markerSpan);
        textRange.select();
        markerSpan.parentNode.removeChild(markerSpan);
    }
}

});