Home
Kofi Osei
Todo list in tailwlind

Todo list in tailwlind

This tailwind example is contributed by Kofi Osei, on 17-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

List

Author Kofi Osei

15.7k

Fork Fullscreen

<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden mt-16">
    <div class="px-4 py-2">
        <h1 class="text-gray-800 font-bold text-2xl uppercase">To-Do List</h1>
    </div>
    <form class="w-full max-w-sm mx-auto px-4 py-2">
        <div class="flex items-center border-b-2 border-teal-500 py-2">
            <input
                class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
                type="text" placeholder="Add a task">
            <button
                class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
                type="button">
                Add
            </button>
        </div>
    </form>
    <ul class="divide-y divide-gray-200 px-4">
        <li class="py-4">
            <div class="flex items-center">
                <input id="todo1" name="todo1" type="checkbox"
                    class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded">
                <label for="todo1" class="ml-3 block text-gray-900">
                    <span class="text-lg font-medium">Finish project proposal</span>
                    <span class="text-sm font-light text-gray-500">Due on 4/1/23</span>
                </label>
            </div>
        </li>
        <li class="py-4">
            <div class="flex items-center">
                <input id="todo2" name="todo2" type="checkbox"
                    class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded">
                <label for="todo2" class="ml-3 block text-gray-900">
                    <span class="text-lg font-medium">Buy groceries</span>
                    <span class="text-sm font-light text-gray-500">Bananas, milk, bread</span>
                </label>
            </div>
        </li>
        <li class="py-4">
            <div class="flex items-center">
                <input id="todo3" name="todo3" type="checkbox"
                    class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded">
                <label for="todo3" class="ml-3 block text-gray-900">
                    <span class="text-lg font-medium">Go for a run</span>
                    <span class="text-sm font-light text-gray-500">3 miles</span>
                </label>
            </div>
        </li>
    </ul>
</div>

Related Examples

Todo list template

Author:
Steven Kuhn

2 years ago

18k
Stacked list

Author:
Odessa Young

2 years ago

18.2k
Responsive list

Author:
Sienna

2 years ago

11.5k
List example

Author:
Isabella Kowalski

2 years ago

13.2k
Features list

Author:
Leon Bachmann

2 years ago

10.4k
Twitter like users list

Author:
Simon Scheffer

2 years ago

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

Author:
Orion.c

2 years ago

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

Author:
Noob

2 years ago

20k
Users ranking list

Author:
Leif99

2 years ago

15.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

2 months ago

671
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.8k
Nested list

Author:
Lukas Müller

2 years ago

12.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components