JSFiddle - React, Tailwind, and code Playground

by avi_02

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.6/lib/index.js"></script>
<div id="app">
<div class="panel panel-default">
  <br>
    <div class="">
      <el-form ref="form" :model="form" label-width="120px">
        <div class="">
          <div id="main" class="bg-purple" :span="25">
            <div class="">
              <h4>Main Activity name</h4>
            </div>
            <div class="">
              <el-row :gutter="12" v-for="(row, key) in form.rowsMain" :key="key">
                <el-col :span="18">
                  <div class="grid-content bg-purple-light">
                    <el-input placeholder="Please input Activity name" v-model="row.value"></el-input>
                  </div>
                  <div class="grid-content bg-color" style="margin-left:30px">
                    <el-row :gutter="10" v-for="(column, index) in rowsMainComponent" :key="index">
                      <el-col :span="19">
                        <div class="grid-content">
                          <el-input placeholder="Please input component name" v-model="form.inputMainComponent[index].text"></el-input>
                        </div>
                      </el-col>
                      <el-col :span="3">
                        <div class="grid-content">
                          <el-button icon="delete" v-on:click="removeRowMainComponent(index)"></el-button>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="2">
                        <div class="grid-content">
                          <el-button type="info" v-on:click="addRowMainComponent()">+</el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="grid-content">
                   ...

SCSS

@import url("//unpkg.com/element-ui@1.4.6/lib/theme-default/index.css");
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .bg-color {
      background-color:#999999
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  #wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .button {
      width: 220px;
  }
  #main {
      float: left;
      width: 49%;
  }
  #support {
      float: right;
      width: 49%;
  }

Babel + JSX

var Main = {
    data() {
    return {
      rows: [],
      tableData: [{
        vc_number: 'ja-02',
        vc_name: 'AAA hotel group',
        vc_gener: 'Hotel'
      }],

      rowsMainComponent: [],
      rowsSupportComponent: [],

      form: {
        input1: '',
        input2: '',
        rowsMain: [],
        rowsSupport: [],
        inputMain: [],
        inputMainComponent: [],
        inputSupport: [],
        inputSupportComponent: []
      },
    }
  },
  methods: {
    addRowMain() {
      this.form.rowsMain.push({
          key: '',
          value: ''
      });
    },
    addRowSupport() {
      this.form.rowsSupport.push({
          key: '',
          value: ''
      });
    },
    addRowMainComponent(index) {
      this.rowsMainComponent.push("");
      this.form.inputMainComponent.push({
        text: ""
      });
    },
    addRowSupportComponent() {
      this.rowsSupportComponent.push("");
      this.form.inputSupportComponent.push({
        text: ""
      });
    },
    removeRowMain(key) {
      this.form.rowsMain.splice(key, 1);
    },
    removeRowSupport(key) {
      this.form.rowsSupport.splice(key, 1);
    },
    removeRowMainComponent(index) {
      this.rowsMainComponent.splice(index, 1);
    },
    removeRowSupportComponent(index) {
      this.rowsSupportComponent.splice(index, 1);
    }
  }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')