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

109

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

Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

8.8k
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

1.3k
nft card
nft card

Author:
5upreme505

8 months ago

1.4k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

2 months ago

538
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

2 months ago

466
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

3 weeks ago

104
Neon container

Author:
Anonymous

1 year ago

3k
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

10.9k
background animation
background animation

Author:
Anonymous

1 year ago

46.2k
Stacked Checkboxes

Author:
kishan pc

1 year ago

2k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

5 months ago

1.1k
htmlcss3

Author:
Anonymous

3 weeks ago

28

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components