JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>  

</head>

<body>
<div class="page">
    <div class="page_content">
        <!-- DESCRIPTION -->
        <label>*Description</label>
        <div id="rte_buttons">
            <a href="#" class="launch_modal" data-modal="modal_embed">Embed</a><br>         
        </div>
        <div id="rte" contenteditable="true" style="border:1px solid black;   min-height: 60px;"></div>

        <!-- REAL FORM -->
        <form method="post" action="">
                <textarea style="" id="description" name="flyer_description"></textarea>
        </form>
    </div>
</div>



<!-- MODAL EMBED 0ad5f1aea06b11e090554040d3dc5c07 -->
<div id="modal_embed" class="modal_frame">
    <h1>Embed content</h1>
    <div class="modal_content">        
        <label>Url</label>
        <input class="styled_form long_text" type="text" id="embed_url">
        
        <div class="modal_actions">
            <a href="#" class="modal_close button button_small button_red">Cancel</a> 
            <a href="#" id="embed_add" class="button button_small button_green">Embed</a> 
        </div>
    </div>
</div>

</body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, button,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}


/*------------------------
 GENERAL
------------------------*/
body
{
color: #5B5B5B;
font-family:Georgia, serif;
background: #f6f6f6;
}

h1, h2, h3, h4, h5
{
font-weight:normal;
}

h1
{
font-size:2em;
}

h2
{
font-size:1.6em;
}

p
{
font-size:1.2em;
line-height:1.4em;
}

a
{
color:#666;
}


/*------------------------
 LAYOUT
------------------------*/

.box
{
font-size:1.3em;
color:#fff;
background: gray;
text-align:center;
padding:10px 0;
margin:20px auto;
}

.content
{
    margin:0px auto;
    width:510px;

}

.content_normal
{
background: #fff;
margin-bottom: 20px;
box-shadow: 0px 0px 4px #aaa;
padding:20px 30px;
}


.page
{
    margin:30px auto;
    width:560px;
background:#fff;
box-shadow: 0px 0px 2px #aaa;
border-radius: 7px;
}

.page_content
{
padding:20px 30px;
}


/*------------------------
 FORM
------------------------*/

fieldset
{
background-color: #eee;
}

label 
{    
display:block;
font-size:1.3em;
margin: 15px 0 0.1em 0;
}

.faux_form, .styled_form
{
font-family:Georgia, serif;
font-size:1em;
border:2px solid #ddd;
padding:5px;
color: #444;

border-radius: 7px;
}

textarea, iframe
{
width:485px;
height:120px;
}

.content_hidden
{
display:none;
}

/*------------------------
 BUTTONS
------------------------*/
.button
{
cursor:pointer;
border: none;
border-radius: 7px;
color:#fff;
font-family: Georgia;
box-shadow: 0px 1px 2px #888;
text-decoration:none;
padding: .3em 1em;


display: inline-block; 
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
text-align:...

JavaScript

$(document).ready(function()
{    
    var selection, anchorNode, anchorOffset, focusNode, focusOffset, focusInput;
    
    $('.faux_form').change( function ()
    {    
        var input_value = $(this).val();
        var transfer_id = $(this).attr('id').replace('faux_', '');
        
        $('#'+transfer_id).val( input_value );        
    }
    );

        $('#link_add').click(function (e)
        {        
            $('#rte').focus();
        
            //vars
            var testDiv = document.getElementById("rte");
            var link_url     = $('#link_url').val();
            var link_title     = $('#link_title').val();
            clean_modals();

            //place caret
//            selection.collapse (anchorNode, anchorOffset);
//            selection.extend( focusNode, focusOffset);
            
            if ( link_title != "")
            {
                //insert html
                execCommandOnElement(testDiv, "insertHTML", "<a href=\""+link_url+"\">"+link_title+"</a>");            
            }
                    
            close_modal ();
            e.preventDefault();
        });    
            

        $('#embed_add').click(function (e)
        {        
            $('#rte').focus();
        
            //vars
            var testDiv = document.getElementById("rte");
            var embed_url     = $('#embed_url').val();
            clean_modals();

            //place caret
//            selection.collapse (anchorNode, anchorOffset);
//            selection.extend( focusNode, focusOffset);

        
            if ( embed_url != "")
            {            
                //insert html
                execCommandOnElement(testDiv, "insertHTML", "<a class=\"embed_content\" href=\""+embed_url+"\">"+embed_url+"</a>");            
            }
                    
            close_modal ();
            e.preventDefault();
        });                
        
        function clean_modals ()
        {
           ...