JSFiddle - React, Tailwind, and code Playground

by Faizan Zubair

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-default" id="richTextWidget"> Text Button </button>

<div id="sortable">
</div>

CSS

.text{
    width: 350px;
    max-width: 500px;
    margin-bottom: 5px;
}
#richTextWidget{
    margin-bottom: 10px;
}

JavaScript

var sortable = document.getElementById('sortable');

var richTextLink = document.getElementById('richTextWidget');
var richTextDiv = 0;
	
if(richTextLink != null)
{
    /* Add a div (Bootstrap panel within an article tag) */
    richTextLink.onclick = function (e) {
        e.preventDefault();
        richTextDiv++;
        console.log(richTextLink.id + ' is clicked');
        sortable.innerHTML +='<article id="rich_text_' + richTextDiv + '" class="text">'
        +'<div class="panel panel-info richText_panel texts rich_text_panel' + richTextDiv + '">'
        +'	<div class="panel-heading">'
        +'		Text'
        +'	</div>' // bootstrap panel heading end
        +'<div class="panel-body">'
        +'<div>Hello</div>'
        +'</div></div>'
        +'</article>';
        
        $( '#rich_text_' + richTextDiv ).resizable({ minWidth: 150, handles: 'e, w' });
    }
}