JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Oh, I love page titles</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
</head>
<body>
  <div class="page-wrapper">
    <main class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                Create a new item
              </div> <!-- /.card-header -->
              <div class="card-body">
                <div id="form-container"></div>
              </div> <!-- /.card-body -->
            </div> <!-- /.card -->
          </div> <!-- /.col -->
        </div> <!-- /.row -->
      </div> <!-- /.container-fluid -->
    </main> <!-- /.page-content -->
  </div> <!-- /.page-wrapper -->


  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src='https://unpkg.com/formiojs@latest/dist/formio.full.js'></script>
</body>

</html>

JavaScript

/**
 * Class CreatePage
 *
 * @since 4.0.0
 */
class CreatePage {
  containerId = "form-container";
  form;

  /**
   * Init class
   *
   * @returns {undefined}
   */
  init() {
    this.initForm(this.containerId);
  }

  /**
   * Init create form in provided container
   *
   * @param {string} containerId The ID of the form-container used in the HTML
   *
   * @returns {undefined}
   */
  async initForm(containerId) {
    const formData = {
      display: "form",
      components: [
        {
          label: "Columns",
          columns: [
            {
              components: [
                {
                  label: "Nome",
                  placeholder: "Inserisci il nome",
                  showCharCount: true,
                  spellcheck: true,
                  tableView: true,
                  validate: {
                    required: true,
                    minLength: 2,
                    maxLength: 30,
                    unique: false,
                    multiple: false
                  },
                  key: "firstName",
                  type: "textfield",
                  input: true,
                  hideOnChildrenHidden: false
                },
                {
                  label: "Email",
                  placeholder: "Inserisci l'email",
                  spellcheck: true,
                  tableView: true,
                  validate: {
                    required: true,
                    minLength: 5,
                    maxLength: 320,
                    unique: false,
                    multiple: false
                  },
                  key: "email",
                  type: "email",
                  input: true,
                  hideOnChildrenHidden: false
                }
              ],
              width: 6,
              offset: 0,
              push: 0,
              pull: 0
            },
            {
              components: [
                {
                  label: "Cognome",
            ...