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

1.1k

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

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.3k
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

5 months ago

920
profil_eleve.html

Author:
Anonymous

5 months ago

273
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

2 years ago

11.7k
Share button

Author:
Maxim

1 year ago

1.7k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

10 months ago

1.4k
Giftcard grid

Author:
ariaw

6 months ago

634
Fancy underline

Author:
Simon Scheffer

3 years ago

12.8k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Author:
Hamza Atig

2 months ago

242
Invoice template

Author:
Shakti

2 years ago

28k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

10 months ago

1k
image

Author:
pablitodgb

8 months ago

537

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