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

742

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

Simple Payment Successfull Notification Page

Author:
Anonymous

7 months ago

1.3k
Features Component

Author:
KULDEEP

5 months ago

946
admin panel

Author:
Anonymous

1 year ago

2.6k
htmlcss0

Author:
Anonymous

6 months ago

534
cards
cards with background animation

Author:
Anonymous

1 year ago

3k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

2 months ago

201
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

20.9k
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

11 months ago

976
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.4k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

1 month ago

187
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

9 months ago

1.4k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12