JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/sortablejs@1.4.2"></script>
<script src="https://unpkg.com/vue-sortable@latest"></script>
<script src="https://cdn.rawgit.com/ktquez/vue-head/master/vue-head.js"></script>
<html lang="fr">

    <head>

          <meta charset="utf-8">
          <title></title>
          
    </head>

<section class="todoapp">

      <header class="header">

        <div id="noti" class="notify">{{ remaining }}</div>

        <h1>Tâches</h1>
        
          <input class="new-todo"
            autofocus autocomplete="off"
            placeholder="Ajoutez une tâche"
            v-model="newTodo"
            @keyup.enter="addTodo">

      </header>

      <section class="main" v-show="todos.length" v-cloak>

        <input class="toggle-all" type="checkbox" v-model="allDone">

            <ul v-sortable="{animation: 800, onEnd: reOrder}" class="todo-list">

              <li v-for="todo in filteredTodos"
                class="todo"
                :key="todo.id"
                :class="{ completed: todo.completed, editing: todo == editedTodo }">

                    <div class="view">

                      <input class="toggle" type="checkbox" v-model="todo.completed">

                      <button class="destroy" @click.prevent="removeTodo(todo)"></button>

                      <label @dblclick="editTodo(todo)">{{ todo.title }}</label>


                    </div>

                    <input class="edit" type="text"
                    v-model="todo.title"
                    v-todo-focus="todo == editedTodo"
                    @blur="doneEdit(todo)"
                    @keyup.enter="doneEdit(todo)"
                    @keyup.esc="cancelEdit(todo)">

              </li>

            </ul>

      </section>

        <footer class="footer" v-show="todos.length" v-cloak>

          <span class="todo-count">

            <strong>{{ remaining }}</strong> {{ remaining...

CSS

html,
                    body {
                      margin: 0;
                      padding: 0;
                    }

                    button {
                      margin: 0;
                      padding: 0;
                      border: 0;
                      background: none;
                      font-size: 100%;
                      vertical-align: baseline;
                      font-family: inherit;
                      font-weight: inherit;
                      color: inherit;
                      -webkit-appearance: none;
                      appearance: none;
                      -webkit-font-smoothing: antialiased;
                      -moz-osx-font-smoothing: grayscale;
                    }

                    body {
                      font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
                      line-height: 1.4em;
                      background: #f5f5f5;
                      color: #4d4d4d;
                      min-width: 230px;
                      max-width: 550px;
                      margin: 0 auto;
                      -webkit-font-smoothing: antialiased;
                      -moz-osx-font-smoothing: grayscale;
                      font-weight: 300;
                    }

                    :focus {
                      outline: 0;
                    }

                    .hidden {
                      display: none;
                    }

                    .todoapp {
                      background: #fff;
                      margin: 130px 0 40px 0;
                      position: relative;
                      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
                                  0 25px 50px 0 rgba(0, 0, 0, 0.1);
                    }

                    .todoapp input::-webkit-input-placeholder {
                      font-style: italic;
                      font-weight: 300;
                      color: #e6e6e6;
                    }

                    .todoapp...

JavaScript

// Full spec-compliant TodoMVC with localStorage persistence
              // and hash-based routing in ~120 effective lines of JavaScript.

              // localStorage persistence
              var STORAGE_KEY = 'todos-vuejs-2.0'
              var todoStorage = {
                fetch: function () {
                  var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
                  todos.forEach(function (todo, index) {
                    todo.id = index
                  })
                  todoStorage.uid = todos.length
                  return todos
                },
                save: function (todos) {
                  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
                }
              }

              // visibility filters
              var filters = {
                all: function (todos) {
                  return todos
                },
                active: function (todos) {
                  return todos.filter(function (todo) {
                    return !todo.completed
                  })
                },
                completed: function (todos) {
                  return todos.filter(function (todo) {
                    return todo.completed
                  })
                }
              }

              // app Vue instance
              var app = new Vue({
                el: 'html',
                head: {
                  title: function () {
                    return {
                        inner: this.remaining + ' Tâches',
                        separator: ' ',
                        complement: ' '   
                    }
                  }
                },
                data: {
                  todos: todoStorage.fetch(),
                  newTodo: '',
                  editedTodo: null,
                  visibility: 'all', 
                },

                // watch todos change for localStorage persistence
                watch: { 
                  todos: {
 ...