JSFiddle - React, Tailwind, and code Playground

by ginpei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <form v-on:submit.prevent="">
    <button>Submt</button>
    <div v-for="item in list" class="item">
      <div class="form-group">
        <label :for="`item-name-${item.id}`">Name</label>
        <input :id="`item-name-${item.id}`" v-model="item.name" class="form-control" type="text" />
      </div>
    </div>
  </form>
</div>

CSS

label {
  font-weight: bold;
}
.form-control {
  width: 100%;
}
.item {
  border: 1px solid #ccc;
  margin-top: 1em;
  padding: 1em;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	list: [
    	{ id: '101', name: 'Foo' },
    	{ id: '102', name: 'Bar' },
    ],
  },
});