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

827

1

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

Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

1.1k
Age verification 18+

Author:
Maxim

1 year ago

1k
button animation
button animation big

Author:
QQ-VVN

8 months ago

799
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12.3k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

6 months ago

1.1k
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

3 weeks ago

46
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.5k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

11 months ago

1.9k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

9 months ago

401
Payment success page example

Author:
Anonymous

8 months ago

1.4k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.8k
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.9k

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