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

2k

6

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

Textarea input
Fancy Textarea

Author:
Piet Vriend

2 years ago

11.2k
simple badge

Author:
Muhammad Imran

1 year ago

1.9k
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Author:
Nick Girga

7 months ago

610
Float Input

Author:
Maxim

1 year ago

4.1k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.9k
Upload file input field

Author:
Gopi Yadav

2 years ago

14.7k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.2k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

8 months ago

710
Search input

Author:
Leon Bachmann

2 years ago

10.9k
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

Author:
Nick Girga

7 months ago

778
Search bar with icon

Author:
Steven Kuhn

3 years ago

15.2k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

11 months ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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 Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12