JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://gistcdn.githack.com/mlt/1b458b5cc674a5ce1e669046e7f93b1e/raw/5debffa24332131712524e08863683cbd6cf2843/json.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/7.0.4/jsoneditor.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/7.0.4/jsoneditor.min.js"></script>
  <div class="container">
    <h1>X-editable starter template</h1>
    <p><a href="#" id="address" class="editable" data-type="json" data-pk="1">superuser</a></p>
  </div>

CSS

.editable-json {
      width: 500px;
    }

    .editableform div[data-schemaid] .form-control {
      width: 100%;
    }

JavaScript

if (typeof JSONEditor.defaults != 'undefined') {
      JSONEditor.defaults.options = {
        theme: 'bootstrap3',
        disable_collapse: true,
        disable_edit_json: true,
        remove_empty_properties: true,
        disable_properties: true
        // iconlib: "fontawesome4"
      };
    }
    $.fn.editable.defaults.placement = 'bottom';

    $('#address').editable({
      // url: '/post',
      title: 'Edit address',
      value: {
        city: "Moscow",
        street: "Lenina",
        building: "15"
      },
      json: {
        schema: {
          "type": "object",
          "title": "Address",
          "properties": {
            "city": {
              "title": "City",
              "type": "string"
            },
            "street": {
              "title": "Street name",
              "type": "string"
            },
            "building": {
              "title": "Building number",
              "type": "string"
            }
          }
        }
      }
    });