TodoBase.vue

<template>
  <div class="todoapp">
    <div class="container">
      <h1>Todo Vue JS</h1>
      <nav class="filters">
        <ul>
          <li class="active"><a>All</a></li>
          <li><a>Completed</a></li>
          <li><a>Pending</a></li>
        </ul>
      </nav>
      <ul class="todos">
        <li>
          <input type="checkbox">
          <label>Todo</label>
          <button>Delete</button>
        </li>
      </ul>
      <div class="progress">
        <progress value="50"></progress>
        <span>% completed</span>
      </div>
      <form class="form">
        <input type="text" placeholder="What you need to do?">
        <button>Adicionar</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {

}
</script>
<style>
.todos .completed {
  text-decoration: line-through;
  font-style: italic;
  color: #c0c0c0;
}

body,
html,
#app {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  height: 100%;
}

.todoapp ul {
  margin: 0;
  padding: 0;
}

.todoapp {
  padding: 20px;
  height: calc(100% - 40px);
}

.todoapp .container {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.todoapp .todos {
  list-style-type: none;
}

.todoapp .todos li,
form input {
  background-color: #f4f4f4;
  border-radius: 10px;
  margin-bottom: 10px;
  color: #7a7a7a;
  padding: 20px;
  font-size: 18px;
  border: 1px solid #ddd;
}

.todoapp .todos li {
  display: flex;
  gap: 10px;
}

.todoapp .todos li label {
  flex: 1;
}

.todoapp .todos li input[type="checkbox"] {
  height: 18px;
  width: 18px;
}

.todoapp .todos button {
  text-transform: uppercase;
  border: none;
  background-color: transparent;
  color: #ff355a;
  font-weight: bold;
  cursor: pointer;
}

.todoapp .filters ul {
  list-style-type: none;
  display: flex;
  gap: 10px;
  color: #7b7b7b;
  margin-bottom: 20px;
}

.todoapp .filters ul li a {
  cursor: pointer;
}

.todoapp .filters ul li.active {
  color: #0097A7;
  border-bottom: 1px solid #0097A7;
}

.todoapp .form input {
  border-radius: 10px;
  margin-bottom: 10px;
  color: #7a7a7a;
  padding: 20px;
  font-size: 18px;
  border: none;
  box-shadow: #c1c1c1 0px 0px 15px -8px;
  flex: 1;
  border: 1px solid #7b7b7b;
}

.todoapp .form button {
  background-color: transparent;
  color: #0097A7;
  border: none;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
}

.todoapp .form {
  display: flex;
  gap: 10px;
}

.todoapp .progress {
  display: flex;
  gap: 10px;
  color: #7b7b7b;
  margin: 20px;
}

.todoapp .progress progress {
  flex: 1;
}

.todoapp h1 {
  background: -webkit-linear-gradient(#9575CD, #00dfab);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>