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 v3.4. It is responsive.

Other

Author Sudip chaudhary

Tailwind v3.4 1.8k 2

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

cards
cards with background animation

Anonymous

3 years ago

11.9k
Features Component

KULDEEP

1 year ago

1.5k
Half filled circle with tailwind

Alok

3 years ago

14.3k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Indra

1 year ago

1.3k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
Show user details

Lucas Martinez

3 years ago

26.2k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Walid Ahmad

2 years ago

2.9k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

444
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Monica D.

2 years ago

4.1k
Play, Pause and Stop buttons

Lukas Müller

3 years ago

12.1k