<div id="app" class="h-screen flex items-center justify-center text-black antialiased">
  <div class="w-full max-w-sm border rounded border-gray-400 px-8 pt-6 pb-4">
    <div class="text-2xl font-bold">Todo App</div>
    <div class="text-gray-700">Don’t forget the important</div>
    <div class="mt-3">
      <!-- item 1 -->
      <div class="flex items-center">
        <div>
          <span v-if="!isFirstDone" @click="isFirstDone = true" class="ion-ios-radio-button-off text-2xl text-gray-500 leading-tight"></span>
          <span v-if="isFirstDone" @click="isFirstDone = false" class="ion-ios-checkmark-circle text-2xl text-teal-400 leading-tight"></span>
        </div>
        <div class="ml-2 flex-1">
          <input class="w-full" type="text" v-model="firstTask" :class="{'line-through text-gray-500': isFirstDone}" placeholder="Enter new task">
        </div>
      </div>
      <!-- item 2 -->
      <div class="flex items-center">
        <div>
          <span v-if="!isSecondDone" @click="isSecondDone = true" class="ion-ios-radio-button-off text-2xl text-gray-500 leading-tight"></span>
          <span v-if="isSecondDone" @click="isSecondDone = false" class="ion-ios-checkmark-circle text-2xl text-teal-400 leading-tight"></span>
        </div>
        <div class="ml-2 flex-1">
          <input type="text" v-model="secondTask" :class="{'line-through text-gray-500': isSecondDone}" placeholder="Enter new task">
        </div>
      </div>
      <!-- item 3 -->
      <div class="flex items-center">
        <div>
          <span v-if="!isThirdDone" @click="isThirdDone = true" class="ion-ios-radio-button-off text-2xl text-gray-500 leading-tight"></span>
          <span v-if="isThirdDone" @click="isThirdDone = false" class="ion-ios-checkmark-circle text-2xl text-teal-400 leading-tight"></span>
        </div>
        <div class="ml-2 flex-1">
          <input type="text" v-model="thirdTask" :class="{'line-through text-gray-500': isThirdDone}" placeholder="Enter new task">
        </div>
      </div>
      <!-- item 4 -->
      <div class="flex items-center">
        <div>
          <span v-if="!isFourthDone" @click="isFourthDone = true" class="ion-ios-radio-button-off text-2xl text-gray-500 leading-tight"></span>
          <span v-if="isFourthDone" @click="isFourthDone = false" class="ion-ios-checkmark-circle text-2xl text-teal-400 leading-tight"></span>
        </div>
        <div class="ml-2 flex-1">
          <input type="text" v-model="fourthTask" :class="{'line-through text-gray-500': isFourthDone}" placeholder="Enter new task">
        </div>
      </div>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
    isFirstDone: true,
    isSecondDone: false,
    isThirdDone: false,
    isFourthDone: false,
    firstTask: 'Pick up delivery',
    secondTask: 'Buy granola',
    thirdTask: 'Call grandma',
    fourthTask: '',
  },
  methods: {
    // functions go here
  }
})

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