JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div id="editor" contentEditable="true"></div>

CSS

#editor {
    width:500px;
    height:170px;
    border: 1px solid gray;
}

JavaScript

$(document).ready(function() {

        var $editor    = $('#editor');
        var $clipboard = $('<textarea />').insertAfter($editor);
        
        if(!document.execCommand('StyleWithCSS', false, false)) {
                document.execCommand('UseCSS', false, true);
        }
        
        $editor.on('paste, keydown', function() {

                var $self = $(this),$content = $self.html();       
                $clipboard.val('').focus();
                document.execCommand('insertHTML', false, $content);
                $self.html($content);
placeCaretAtEnd($self);                
        });

});

function placeCaretAtEnd(el) {
    el = $(el).get(0);
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}