JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="main">
        <div class="page-header">
            <h1 contenteditable="true">Title</h1>
        </div>
        <div class="page-body ui-sortable">




<div class="element-form-horizontal" style="width: 100%; height: auto;"><div class="element-heading"><button class="btn btn-element" disabled="disabled">Form-Horizontal</button><button class="btn btn-remove" onclick="element_remove(this);"><span class="glyphicon glyphicon-remove"></span></button><button class="btn btn-move"><span class="glyphicon glyphicon-move"></span></button><button class="btn btn-edit" onclick="element_edit(this);"><span class="glyphicon glyphicon-pencil"></span></button></div><div class="element-edit"><div class="form-inline form-inline-sm">						<div class="form-group"><label>name</label><input type="text" class="form-control" onkeyup="add_attr_value(this)"></div>						<div class="form-group"><label>id</label><input type="text" class="form-control" onkeyup="add_attr_value(this)"></div>					</div></div><div class="element-body"><div class="form-horizontal ui-sortable" style="height: auto;"><div class="element-section-title" style="width: 100%; height: auto;"><div class="element-heading"><button class="btn btn-element" disabled="disabled">Section-Title</button><button class="btn btn-remove" onclick="element_remove(this);"><span class="glyphicon glyphicon-remove"></span></button><button class="btn btn-move"><span class="glyphicon glyphicon-move"></span></button><button class="btn btn-edit" onclick="element_edit(this);"><span class="glyphicon glyphicon-pencil"></span></button></div><div class="element-edit"><div class="form-inline form-inline-sm">						<div class="form-group"><label>name</label><input type="text" class="form-control" onkeyup="add_attr_value(this)"></div>						<div class="form-group"><label>id</label><input type="text" class="form-control"...

CSS

/*
 * element
 */
/*label {
	position: absolute;
}*/
 
.element, .element-page-description, .element-form-horizontal, .element-section-title,
.element-section-body, .element-section-button, .element-table, .element-inline-block-text {
	border: solid #CCC 1px;
	border-radius: 4px;
	margin: 10px 5px;
	background-color: #FAFAFA;
    width: 100%;
	display: inline-block;
    position: relative;
 }

.element-checkbox, .element-radio, .element-select, .element-sub-section, .element-help-block, .element-inline-group {
	border: solid #CCC 1px;
	border-radius: 4px;
	margin: 10px 5px;
	background-color: #FAFAFA;
    width: 50%;
	display: block;
    position: relative;
 }
.element-inline-block-text{
	position: relative;
	display: inline-block;
	border: solid #CCC 1px;
	border-radius: 4px;
	margin: 10px 5px;
	background-color: #FAFAFA;
	width: 200px;
}

.element-button, .element-inline-text, .element-inline-input, .element-inline-select, .element-inline-checkbox,
.element-inline-radio  {
	border: solid #CCC 1px;
	border-radius: 4px;
	margin: 10px 5px;
	background-color: #FAFAFA;
    width: auto;
	display: inline-block;
    position: relative;
 }

.element-heading {
	border-bottom: dashed #CCC 1px;
}

.element-body {
	padding: 1px 10px 1px 10px;
}

.btn {
	min-height: 26px;
}

.btn-element, .btn-element:focus, .btn-element:active, .btn-element.active {
	background-color: #EEE;
	border-color: #CCC;
	padding: 1px 5px 1px 5px;
	margin-right: 5px;
	border-top: solid transparent 1px;
	border-left: solid transparent 1px;
 }

.btn-remove, .btn-remove:hover, .btn-remove:visited, .btn-remove:link,
.btn-remove:focus,.btn-remove:active:focus,.btn-remove.active:focus,
.btn-remove.focus,.btn-remove:active.focus,.btn-remove.active.focus,
.open>.dropdown-toggle.btn-remove {
	float: right;
	background-color: #d9534f;
	color: #FFF;
	border-color: #d9534f;
	padding: 1px 5px 1px 5px;
	border-top: solid transparent 1px;
	border-right: solid transparent 1px;
	opacity: 0.8;
 }

.btn-move,...

JavaScript

$("#generate").click(function () {
    generate_web();
});

function generate_web()
{
	var whole_page = $('.main');
    console.log( traversing(whole_page) );
}

function traversing( item ) {
    var return_html = "";
    item.children("div").children("div").children(".element-body").each(function() {      
            
        var values = html_reference($(this));
        var html_tag = values.html_tag;
        var html_class = values.html_class;
        var html_type = values.html_type;
        var html_text = values.html_text;
        
        return_html += '<' + html_tag + ' ' + html_type + ' '+ html_class +'>';
        return_html += html_text;
        return_html += traversing($(this));
        return_html += '</' + html_tag + '>';
    });
    return return_html;
}

function html_reference( element )
{
    var html_tag = "";
    var html_type = "";
    var html_class = "";
    var html_text = "";
    
    //var element_type = element.parent().children(".element-heading").children(".btn-element").text();   
	// TODO: check the siblings function works correctly or not
    var element_type = element.siblings(".element-heading").children(".btn-element").text();
	
    switch(element_type)
    {
        case 'Page-Description':
            html_tag = "p";
            html_class = 'class="page-description"';
            html_text = element.children().text();
            break;
        case 'Form-Horizontal':
            html_tag = "form";
            html_class = 'class="form-horizontal"';
            break;
        case 'Section-Title':
            html_tag = "p";
            html_class = 'class="section-title"';
            html_text = element.children().text();
            break;
        case 'Section-Body':
            html_tag = "div";
            html_class = 'class="section-body"';
            break;
        case 'Section-Button':
            html_tag = "div";
            html_class = 'class="section-button"';
            break;
        case 'Button':
    ...