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

201

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

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

1 month ago

87
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

1 month ago

149
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

6 months ago

960
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

283
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.3k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

3 months ago

542
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

8 months ago

3.1k
Responsive Multi-Step Registration
Responsive Multi-Step Registration

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

1.3k
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

9 months ago

2.5k
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

339
magic card
by salvator

Author:
Baraka Salvator

2 months ago

373
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

40.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components