Home
Muzammil Riaz
Todo List

Todo List

A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

This tailwind example is contributed by Muzammil Riaz, on 26-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Other

Author Muzammil Riaz

934

2

Fork Fullscreen

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-white dark:bg-dark-bg flex justify-center items-center min-h-screen p-5">
    <div class="border shadow-teal-300 shadow-md max-w-2xl w-full p-6 rounded-lg dark:bg-gray-800 dark:text-gray-300">
        <h1 class="text-4xl font-mono font-extrabold py-3 bg-clip-text text-transparent bg-gradient-to-r from-neon-pink to-neon-blue">
            ✨ TODO-List
        </h1>
        
        
        <div class="flex mb-6 group">
            <input 
                id="taskInput"
                type="text" 
                placeholder="Add a new task..." 
                class="flex-1 px-4 py-3 rounded-l-lg bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:border-neon-purple focus:ring-1 focus:ring-neon-purple transition-all duration-300 group-hover:shadow-neon-sm"
            >
            <button 
                id="addTaskBtn"
                class="px-5 rounded-r-lg bg-gradient-to-r from-neon-purple to-neon-blue font-medium hover:shadow-neon transition-all duration-300"
            >
                Add
            </button>
        </div>
        
        
        <div id="taskList" class="space-y-3 mb-6">
            
        </div>
        
        
        <div class="p-4 rounded-lg bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600">
            <div class="flex justify-between text-sm">
                <div class="text-center">
                    <div id="pendingCount" class="text-2xl font-bold text-neon-pink">0</div>
                    <div class="text-gray-500 dark:text-gray-400">Pending</div>
                </div>
                <div class="text-center">
                    <div id="completedCount" class="text-2xl font-bold text-neon-blue">0</div>
                    <div class="text-gray-500 dark:text-gray-400">Completed</div>
                </div>
                <div class="text-center">
                    <div id="totalCount" class="text-2xl font-bold text-purple-400">0</div>
                    <div class="text-gray-500 dark:text-gray-400">Total</div>
                </div>
            </div>
        </div>
    </div>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            const taskInput = document.getElementById('taskInput');
            const addTaskBtn = document.getElementById('addTaskBtn');
            const taskList = document.getElementById('taskList');
            const pendingCount = document.getElementById('pendingCount');
            const completedCount = document.getElementById('completedCount');
            const totalCount = document.getElementById('totalCount');
            
            let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            
            function renderTasks() {
                taskList.innerHTML = '';
                let pending = 0;
                let completed = 0;
                
                tasks.forEach((task, index) => {
                    const taskElement = document.createElement('div');
                    taskElement.className = `flex items-center p-4 rounded-lg bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:border-neon-blue hover:shadow-neon-sm transition-all duration-300 ${task.completed ? 'opacity-60' : ''}`;
                    
                    taskElement.innerHTML = `
                        <div class="flex items-center flex-1">
                            <input 
                                type="checkbox" 
                                ${task.completed ? 'checked' : ''}
                                class="h-5 w-5 rounded border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-700 text-neon-pink focus:ring-neon-pink mr-3 task-checkbox"
                                data-index="${index}"
                            >
                            <span class="text-lg ${task.completed ? 'line-through' : ''}">${task.text}</span>
                        </div>
                        <button class="text-gray-500 dark:text-gray-400 hover:text-neon-pink ml-2 delete-btn" data-index="${index}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                        </button>
                    `;
                    
                    taskList.appendChild(taskElement);
                    
                    if (task.completed) {
                        completed++;
                    } else {
                        pending++;
                    }
                });
                
                pendingCount.textContent = pending;
                completedCount.textContent = completed;
                totalCount.textContent = tasks.length;
            }
            
            function addTask() {
                const text = taskInput.value.trim();
                if (text) {
                    tasks.push({ text, completed: false });
                    localStorage.setItem('tasks', JSON.stringify(tasks));
                    taskInput.value = '';
                    renderTasks();
                }
            }
            
            addTaskBtn.addEventListener('click', addTask);
            
            taskInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addTask();
                }
            });
            
            taskList.addEventListener('click', function(e) {
                if (e.target.classList.contains('task-checkbox')) {
                    const index = e.target.dataset.index;
                    tasks[index].completed = e.target.checked;
                    localStorage.setItem('tasks', JSON.stringify(tasks));
                    renderTasks();
                }
                
                if (e.target.classList.contains('delete-btn') || e.target.closest('.delete-btn')) {
                    const btn = e.target.classList.contains('delete-btn') ? e.target : e.target.closest('.delete-btn');
                    const index = btn.dataset.index;
                    tasks.splice(index, 1);
                    localStorage.setItem('tasks', JSON.stringify(tasks));
                    renderTasks();
                }
            });
            
            renderTasks();
        });
    </script>

Related Examples

portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

841
cards
cards with background animation

Author:
Anonymous

2 years ago

11.4k
Heading

Author:
KULDEEP

8 months ago

1k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

6 months ago

594
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

788
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

11 months ago

1.5k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

8 months ago

1k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

9 months ago

1.2k
background animation
background animation

Author:
Anonymous

2 years ago

50.8k
Background image section

Author:
Marc

2 years ago

6.6k
pages / slides

Author:
MD Fardous Alom

1 year ago

1.5k
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Author:
Hamza Atig

2 months ago

153

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: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12