<div class="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans" x-data="{ items: [], item: '' }">
  <div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
    <div class="mb-4">
      <h1 class="text-grey-darkest">Todo List</h1>
      <div class="flex mt-4">
        <input class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker"
               placeholder="Add Todo" x-model="item">
        <button class="flex-no-shrink p-2 border-2 rounded text-teal border-teal hover:text-white hover:bg-teal"
                @click="items.push({ item }); item = ''">
          Add
        </button>
      </div>
    </div>
    <div>
      <template x-for="(todo, index) in items" :key="index">
        <div class="flex mb-4 items-center">
          <p class="w-full text-grey-darkest" x-text="todo.item"></p>
          <button class="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red"
                  @click="items = items.filter((elem, i) => { return i != index; })">
            Remove
          </button>
        </div>
      </template>
    </div>
  </div>
</div>