JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="section-dark col-4">
   
   <div class="test"></div>
  
</div>

SCSS

.neon-json-form-container {
  padding:10px;
  
  .item-section {
    padding-bottom:8px;
  }
  
  .item-wrap {
    padding:6px;
    background:rgba(100,100,100,0.1);
  }
}

.section-dark {
  color: #fff;
  background-color:#13191f!important;
  
  h6 {
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.2em;
  }
  
  .custom-control-label::before {
    background: #333;
    border-color: #222;
  }
  
  .form-control {
    background:none;
    border:none;
    border-bottom: 1px solid #434a52;
    border-radius:0;
    box-shadow:none;
    outline:none;
    color:inherit;
  }
  
  .btn-primary {
    background:#214a80;
    border:none;
    border-radius:4px;
    padding:11px;
    box-shadow:none;
    margin-top:26px;
    text-shadow:none;
    outline:none;
  }
  
}

JavaScript

const createSchemaPath = function(path) {
    const p = [];
    for (let i=0,l=path.length; i < l; i++) {
        p.push('properties',path[i],'items');
    }
    //p.shift(); // Remove first 'items'
    return p;
};

const createUIPath = function(path) {
    const p = [];
    for (let i=0,l=path.length; i < l; i++) {
    		if (i !== 0) {
        	p.push('items');
        }
        p.push(path[i]);
    }
    return p;
};

const defaultWidgets = {
	array: 'tabarray',
  object: 'tags',
  integer: 'number',
	string: 'text',
  boolean: 'checkbox'
};


class widget {
	
  constructor(data={}) {
  	this.data = data || {};
  }
  
  onInit() {
  
  }
  
  onUpdate() {
  	
  }
  
  renderLabel() {
  	const data = this.data;
  	const item = data.item;
    if (!item.title) return null;
    const tag = data.depth === 0 ? 'h6' : 'label';
    const el = document.createElement(tag);
    el.innerText = item.title;
    return el;
  }
  
}

const widgets = {};

widgets.text = class extends widget {
  
  onInit() {
  	const data = this.data;
  	const item = data.item;
  	const el = document.createElement('input');
    el.className = item.className || 'form-control';
    el.setAttribute('name', data.path.join('.'));
    el.value = data.value || '';
    return el;
  }

}

widgets.textarea = class extends widget {
  
  onInit() {
  	const data = this.data;
  	const item = data.item;
  	const el = document.createElement('textarea');
    el.className = item.className || 'form-control';
    el.setAttribute('name', data.path.join('.'));
    el.value = data.value || '';
    return el;
  }

}

widgets.date = class extends widgets.text {
  
  onInit() {
  	const el = super.onInit();
    el.setAttribute('type','date');
    return el;
  }

}

widgets.color = class extends widgets.text {
  
  onInit() {
  	const el = super.onInit();
    el.setAttribute('type','color');
    return el;
  }

}

widgets.checkbox = class extends widget {
  
  onInit() {
  	const item = this.data.item;
		const el =...