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="row">
   <div class="col-lg-9 col-md-9">
      <div id="edit-area">
          <div class="row">
              <div class="col-lg-12 col-md-12 active"></div>
          </div>
      </div>
   </div>
   <div class="col-lg-3 col-md-3" id="componentes">
      <div class="list-group">
        <button class="add list-group-item" data-componente="textbox">Textbox Group</button>
        <button class="add list-group-item" data-componente="input">Input</button>
        <button class="add list-group-item" data-componente="btn">Botão</button>
      </div>
   </div>
</div>

CSS

#edit-area {
  display: block;
  margin-bottom:20px;
  box-sizing: content-box;
  min-height: 400px;
  position: relative;
  overflow: auto;
  background: #E0E0E0;
}

.row{
    background:white;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    margin:10px;
    min-height:30px;
}

JavaScript

var Componentes = {
   "input": {
      "Label": "Textbox",
      "Tag": "input",
      "Attributes": {
         "type": "text"
      },
      "Class": "form-control"
   },
   "btn": {
      "Label": "Button",
      "Tag": "button",
      "Attributes": {
         "type": "button"
      },
      "Class": "btn",
      "Childrens":[
         {
            "Type": "text",
            "Value": "Botão"
         }
      ]
   },
   "label": {
      "Label": "Label",
      "Tag": "label",
      "Class": "",
      "Childrens":[
         {
            "Type": "text",
            "Value": "Label:"
         }
      ]
   },
   "form-help":{
      "Label": "Form help",
      "Tag": "span",
      "Class": "help-block",
      "Childrens":[
         {
            "Type": "text",
            "Value": "I'm a help text."
         }
      ]
   },
   "textbox": {
      "Label": "Textbox Group",
      "Tag": "div",
      "Class": "form-group",
      "Siblings":[],
      "Childrens":[
         {
            "Type": "component",
            "Value":"label"
         }, 
         {
            "Type": "component",
            "Value":"input"
         },
         {
            "Type": "component",
            "Value": "form-help"
         }
      ],
      "Rules": {
         "AllowChilds": false
      }
   }
};


$(document).on('click', '#componentes .add', function(event){
   event.preventDefault();

   AddComponent( $(this).data('componente') );


});

function AddComponent(componente, retorna){
   retorna = retorna == undefined ? false : retorna;
    
    console.log(componente);
    
   if(Componentes == null){
      alert("Os componentes ainda não foram carregados");
      return false;
   }

   var c = Componentes[componente];

   var cmp = {
      'CID': Date.now(),
      'Type': componente
   };

   var $element = $('<'+c.Tag+' />');
   $element.addClass(c.Class+" component "+c.EditClass);


   if (c.Attributes != undefined && c.Attributes.length > 0)
      for(attr in c.Attributes)
...