Home
Sudip chaudhary
To-Do List with Tailwind CSS

To-Do List with Tailwind CSS

A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

This tailwind example is contributed by Sudip chaudhary, on 17-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Sudip chaudhary

678

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>To-Do List</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white shadow-2xl rounded-2xl w-full max-w-md p-6">
    <h1 class="text-2xl font-bold text-center text-gray-800 mb-4">📝 To-Do List</h1>
    
    <div class="flex mb-4">
      <input
        type="text"
        id="taskInput"
        placeholder="Enter a task"
        class="flex-grow p-2 rounded-l-md border border-gray-300 focus:outline-none"
      />
      <button
        onclick="addTask()"
        class="bg-indigo-500 text-white px-4 py-2 rounded-r-md hover:bg-indigo-600"
      >
        Add
      </button>
    </div>

const li = document.createElement("li");
      li.className = "flex justify-between items-center bg-gray-100 p-2 rounded-md";

const span = document.createElement("span");
      span.textContent = taskText;
      span.className = "flex-1 cursor-pointer";
      span.onclick = () => span.classList.toggle("line-through");

const deleteBtn = document.createElement("button");
      deleteBtn.innerHTML = "❌";
      deleteBtn.className = "text-red-500 hover:text-red-700 ml-2";
      deleteBtn.onclick = () => li.remove();

li.appendChild(span);
      li.appendChild(deleteBtn);

document.getElementById("taskList").appendChild(li);
      taskInput.value = "";
    }
  </script>
</body>
</html>

Related Examples

Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.8k
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Author:
Bonimater

5 months ago

321
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.5k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

4 months ago

443
Share button

Author:
Maxim

10 months ago

1.2k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

5 months ago

479
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

1 week ago

53
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

5 months ago

747
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

2 months ago

447
Popover
basic popover example

Author:
Dipti narayan

2 years ago

12.8k
chatbot
is my chatbot

Author:
Omer fils ELENGA

2 weeks ago

57
default template

Author:
Anonymous

5 months ago

336

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components