JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">
    <h1>Awesome Items</h1>

    <table>
      <thead>
        <tr>
          <th>Start</th>
          <th>End</th>
          <th>Name</th>
          <th>Description</th>
          <th>tags</th>
          <th>Note</th>
        </tr>
      </thead>
      <tbody>
        <tr v-repeat="items">
          <td>{{ start }}</td>
          <td>{{ end }}</td>
          <td>{{ name }}</td>
          <td>{{ description }}</td>
          <td>{{ tags }}</td>
          <td>{{ note }}</td>
        </tr>
        <tr>
          <td form="new-item">
            <input type="text"
                   v-model="newItem.start"
                />
          </td>
          <td form="new-item">
            <input type="text"
                   v-model="newItem.end"
                />
          </td>
          <td form="new-item">
            <input type="text"
                   v-model="newItem.name"
                />
          </td>
          <td form="new-item">
            <input type="text"
                   v-model="newItem.description"
                />
          </td>
          <td form="new-item">
            <input type="text"
                   v-model="newItem.tags"
                />
          </td>
          <td form="new-item">
            <input type="text"
                   v-model="newItem.note"
                />
          </td>
        </tr>
      </tbody>
    </table>
    <form id="new-item" v-on="submit: addItem">
      <button type="submit">Create</button>
    </form>

    <pre>{{ $data | json }}</pre>
  </div>

CSS

table th, table td {
    border: solid 1px;
}
table {
  border-collapse: collapse;
}

JavaScript

new Vue({
  el: '#demo',
  
  data: {
    items: [
      {
        start: '12:15',
        end: '13:15',
        name: 'Whatch Vue.js Laracast',
        description: 'Watched the Laracast series on Vue.js',
        tags: ['learning', 'Vue.js', 'Laracast', 'PHP'],
        note: "Vue.js is really awesome. Thanks Evan You!!!"
      },
      {
        start: '13:15',
        end: '13:30',
        name: "Rubik's Cube",
        description: "Play with my Rubik's Cube",
        tags: ['Logic', 'Puzzle', "Rubik's Cube"],
        note: "Learned a new algorithm."
      }
    ],
    newItem: {start: '', end: '', name: '', description: '', tags: '', note: ''}
  },

  methods: {
    addItem: function(e) {
      e.preventDefault();

      this.items.push({
        name:        this.newItem.name,
        start:       this.newItem.start,
        end:         this.newItem.end,
        description: this.newItem.description,
        tags:        this.newItem.tags,
        notes:       this.newItem.notes
      })
    }
  }
});