JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        
        <div id="note1" class="note">
            <div class="note-header">Note</div>
            <div class="note-content"></div>
        </div>
        
    </body>
</html>

CSS

body {
    background-color:black
}
.note {
    width: 150px;
    height: 150px;
    background: #111111;
}
.note h4 {
    text-align: center;
}
.note-header {
    background: #0b3e6f;
    color: #f6f6f6;
    font-weight: bold;
    
}
.note-content {
    height: 100%;
    width: 100%;
}
.note-editor {
    width: 100%;
    height: 100%;
}

JavaScript

$(function() {
    $("#note1").resizable().draggable({
        handle: ".note-header"
    });
    $('#note1').children('.note-content').append('<iframe id="rte" class="note-editor" ></iframe>');
    $('#rte').contents().attr("designMode", "on");
});