JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input"></div>

JavaScript

var iframe = null, iwindow = null, iDocument = null;

function setUpInput() {
        iframe = document.createElement( 'iframe' );
        iframe.setAttribute( 'id', 'iframe-test' );
        iframe.setAttribute( 'frameborder', 0 );
        iframe.setAttribute( 'style', 'width:100%; height:100%;border: solid 1px red;' );

        document.getElementById( "input" ).appendChild( iframe );

        iwindow   = iframe.contentWindow;
        idocument = iwindow.document;
    
        idocument.open();
        //idocument.write("<p></p>");
        idocument.close();

        idocument.body.setAttribute( 'spellcheck', false );
        idocument.body.setAttribute( 'style', 'font-family: Consolas,serif;font-size: 0.8em;' );
        idocument.body.contentEditable = true;

        iwindow.onkeydown = function(e) {
            if (e.ctrlKey && e.keyCode == 32) {
                createSuggestObject();
                return false;
            }
            if (e.ctrlKey) return false;
        };

        iwindow.onkeypress = function(e) {if (e.ctrlKey) return false;};
}

var currentSuggestObject;
function createSuggestObject() {
    if (currentSuggestObject) {
        currentSuggestObject.parentNode.removeChild(currentSuggestObject);
    }    
    
    suggest = new Object();
    suggest.box = document.createElement( 'div' );
    suggest.box.style.position = 'absolute';
    suggest.box.style.width = '120px';
    suggest.box.style.overflow = 'auto';
    suggest.box.style.border = '1px solid #BEC7E4';
    suggest.box.style.display = 'block';
    suggest.box.style.marginTop = '16px';
    suggest.box.innerHTML = "Example 1";
    document.body.appendChild( suggest.box )
    currentSuggestObject = suggest.box;
    
    var position = iframe.getBoundingClientRect(),
        selObj = iwindow.getSelection(),
        p = selObj.anchorNode.parentNode,
        beacon = document.createElement('span');
    //var selRange = selObj.getRangeAt(0);
    
    beacon.id = 'posBeacon';
    //...