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

1.4k

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

File upload input box

Author:
Mohit Prajapati

2 years ago

13.1k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

2 years ago

11.1k
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

21.2k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

1 month ago

417
Table of content
Show list of Table of content

Author:
Anonymous

1 year ago

4.8k
Todo list template

Author:
Steven Kuhn

2 years ago

17.7k
Bullet points list
for sections like "Why Choose Us"

Author:
Orson Kincaid

5 months ago

686
Search input

Author:
Leon Bachmann

2 years ago

10.1k
Users ranking list with points

Author:
Leif99

2 years ago

10.9k
Console like input field

Author:
Charlotte Dupont

2 years ago

10.7k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

3.3k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

25.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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.1