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

2.3k

7

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

Login form

Author:
Gopi Yadav

3 years ago

12k
Product Form - Reverie

Author:
S V

1 year ago

1.1k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Author:
Muhammad Imran

1 year ago

2.5k
flex row

Author:
Yanjun Lin

1 year ago

1k
Login Form with Icon

Author:
Prashant

4 years ago

18.8k
Item List

Author:
Amit Pachange

4 years ago

10.8k
Responsive list

Author:
Sienna

3 years ago

12.8k
login
html , css

Author:
Hacker Development

1 year ago

1.3k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

1 year ago

2.6k
Stacked list

Author:
Odessa Young

3 years ago

19.9k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

3 years ago

20.5k
Comment section

Author:
Manuela Bianka

4 years ago

12.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: [email protected]

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12