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

661

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

visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

5 months ago

744
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

11.2k
Giftcard grid

Author:
ariaw

1 month ago

147
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

6 months ago

830
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

5 months ago

503
NFT Header with Hero

Author:
Abdul Baset Bappy

4 months ago

818
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.8k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

4 months ago

278
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

9 months ago

1.2k
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

9 months ago

823
blockquote

Author:
Freja Jensen

2 years ago

9.7k
Hero

Author:
ORGIN_DREAMS

5 months ago

807

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