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

340

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

Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

4 months ago

704
Full Page loading overlay

Author:
Bunny

2 years ago

11.9k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.2k
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

3 months ago

409
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

6 months ago

974
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

1.3k
Terms of Service Page Template

Author:
Anonymous

8 months ago

1.7k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

6 months ago

1.2k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

5 months ago

603
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

7 months ago

1.7k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.3k
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.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components