To-Do Lists – 8 Free CSS, Bootstrap & Tailwind Sets
To-Do Lists is a pack of eight sets of to-do lists and task list interfaces, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .card, .list-group, .form-check-input, .progress, .badge and .toast where they fit, and Tailwind CSS 4. The sets cover a working to-do app with filters and localStorage, progress checklists, tasks with due dates and priority labels, inline editing with undo after delete, subtasks with an indeterminate parent, a habit tracker and daily planner, a dark set, and a modern CSS set that filters and counts tasks with :has() and CSS counters and no JavaScript. Where a set needs a script it is a short piece of vanilla JavaScript with no library, and the same script runs in all three versions.
A good to-do list is built from real checkboxes with labels, so a task can be ticked with a click on its text, the space bar or a screen reader, rather than from clickable divs. Buttons that act on one task say which task they act on, such as Delete Buy milk, because a list of identical Delete buttons is useless out of context. When a task is added, ticked or deleted the change is announced politely, and focus moves somewhere sensible instead of falling back to the top of the page when the row it was on disappears. Priority and overdue state are written in words, not only shown in red, deletes can be undone, and a parent task whose subtasks are half done says so with the mixed state rather than looking unticked.
