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.8k

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

Order Delivered List

Author:
ABDO-SY

2 months ago

396
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.3k
bardui.com badge

Author:
Muhammad Imran

8 months ago

1.3k
Search input

Author:
Leon Bachmann

2 years ago

10.4k
Console like input field

Author:
Charlotte Dupont

2 years ago

11.1k
Logo cloud

Author:
Alok

2 years ago

9.9k
Colored checkboxes
use custom accent color according to your design

Author:
Pixel Perfect

1 year ago

4.4k
Nested list
A nested list is suitable for a table of contents / navigational list

Author:
Noob

2 years ago

20.2k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

16k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.7k
Login Form with Icon

Author:
Prashant

2 years ago

16.4k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

1 month ago

186

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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