<div id="app" class="text-black antialiased flex justify-center">
  <div class="w-full max-w-sm">
    <!-- Header -->
    <div class="text-3xl font-bold mt-8 mb-2 px-3">
      Tasks
    </div>
    <!-- List -->
    <div v-for="(task, i) in tasks" class="flex items-center py-2 px-3 hover:bg-gray-100">
      <div class="flex-1">{{task}}</div>
      <button @click="removeItem(i)"
              class="text-lg ion-md-close text-gray-400 hover:text-teal-500">
      </button>
    </div>
    <!-- New -->
    <div class="flex items-center px-3 border-t border-gray-200 mt-3 pt-3">
      <input v-model="newTask"
             @keypress.enter="addItem()"
             type="text"
             placeholder="Enter new task..."
             class="flex-1 py-2">
      <button class="text-teal-500"
              @click="addItem()">
        Add
      </button>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
    tasks: [
      'Pick up delivery',
      'Buy granola',
      'Call grandma',
    ],
    newTask: ''
  },
  methods: {
    addItem () {
      this.tasks.push(this.newTask)
      this.newTask = ''
    },
    removeItem (i) {
      this.tasks.splice(i, 1)
    }
  }
})

External CSS

  1. https://cdn.jsdelivr.net/npm/tailwindcss@next/dist/tailwind.min.css
  2. https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js