Home
Michael Andreuzza
todo list with Tailwind CSS and Alpinejs

todo list with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Input List

Author Michael Andreuzza

1k

3

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<body class="bg-white ">   <section class="bg-white relative overflow-hidden"> <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 lg:py-32 relative p-8"> <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto w-full"> <div> <h1>Todo list</h1> <p class="text-balance">
Click on the button below or press enter to add a new item. Then
            click on the checkbox to mark the item as completed, to remove it
            from the listm, just click on the X.
</p> </div> </div> <div class="mt-6 border-t pt-12 max-w-xl mx-auto w-full">  <div x-data="{
        todos: [],
        newTodo: '',
        addTodo() {
            if (this.newTodo.trim() !== '') {
                this.todos.push({ text: this.newTodo, completed: false });
                this.newTodo = '';
                localStorage.setItem('todos', JSON.stringify(this.todos));
            }
        },
        removeTodo(index) {
            this.todos.splice(index, 1);
            localStorage.setItem('todos', JSON.stringify(this.todos));
        },
        initializeTodos() {
            const storedTodos = localStorage.getItem('todos');
            if (storedTodos) {
                this.todos = JSON.parse(storedTodos);
            }
        }
    }" x-init="initializeTodos">  <div class="flex flex-col gap-2 items-center"> <button @click="addTodo" class="rounded-full bg-orange-600 px-8 py-2 h-10 text-sm font-semibold text-white hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 w-full">Add</button> <input type="text" x-model="newTodo" @keydown.enter="addTodo" class="w-full border-gray-300 rounded-md placeholder-gray-400 text-sm focus:border-orange-500 focus:ring-orange-500" placeholder="Make the logo bigger"> </div>  <ul class="divide-y mt-4"> <template x-for="(todo, index) in todos" :key="index"> <li class="flex items-center space-x-2 w-full py-2"> <div class="flex items-center justify-between w-full"> <div> <input type="checkbox" x-model="todo.completed" class="form-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"> <span x-text="todo.text" :class="{ 'line-through': todo.completed }" class="text-lg text-gray-500"></span> </div> <button @click="removeTodo(index)" class="text-black hover:text-red-700 focus:outline-none ml-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"></path> </svg> </button> </div> </li> </template><li class="flex items-center space-x-2 w-full py-2"> <div class="flex items-center justify-between w-full"> <div> <input type="checkbox" x-model="todo.completed" class="form-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"> <span x-text="todo.text" :class="{ 'line-through': todo.completed }" class="text-lg text-gray-500">Nextjs</span> </div> <button @click="removeTodo(index)" class="text-black hover:text-red-700 focus:outline-none ml-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"></path> </svg> </button> </div> </li><li class="flex items-center space-x-2 w-full py-2"> <div class="flex items-center justify-between w-full"> <div> <input type="checkbox" x-model="todo.completed" class="form-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"> <span x-text="todo.text" :class="{ 'line-through': todo.completed }" class="text-lg text-gray-500">cucumber</span> </div> <button @click="removeTodo(index)" class="text-black hover:text-red-700 focus:outline-none ml-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"></path> </svg> </button> </div> </li> </ul> </div>   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2 sr-only"> <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border"> <div class="flex w-0 flex-1 items-center p-4"> <div class="w-full"> <p class="text-sm font-medium text-neutral-900">Tutorial</p> <p class="mt-1 text-sm text-neutral-500">
How to create a todo list with Tailwind CSS and Alpinejs
</p> <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
by © Lexington Themes</a> </p> </div> </div> <div class="flex"> <div class="flex flex-col divide-y divide-neutral-200"> <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-todo-with-alpine-js-and-tailwind-css/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div> <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/todo/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div> </div> </div> </div> </div>  </div> </div> </section>   <script async="" src="https://stats.andreuzza.com/script.js" data-website-id="783e2848-40f7-4352-88c3-dbbd1919f38e"></script></body>

Related Examples

Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

1 year ago

5.8k
Features list

Author:
Leon Bachmann

2 years ago

9.9k
Invalid input detected message
incorrect input notification

Author:
Conan Hilton

1 year ago

11.3k
Toggle button

Author:
Matthew Chen

1 year ago

11.1k
Todo list in tailwlind

Author:
Kofi Osei

1 year ago

14.4k
Basic list

Author:
Leon Bachmann

2 years ago

9.4k
Users ranking list with points

Author:
Leif99

1 year ago

10.3k
floting input

Author:
Md. Tofayel islam

10 months ago

1.5k
List component

Author:
Shru hari

8 months ago

1.6k
Default phone input

Author:
Md. Tofayel islam

10 months ago

1.8k
Nested list section
List with soft background colors. List with Hierarchy

Author:
Orion.c

1 year ago

10.6k
List example

Author:
Isabella Kowalski

1 year ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1