Interactive Kanban Board

Kanban board with draggable tasks

This tailwind example is contributed by Quentin Rivers, on 05-Oct-2024. Component is made with Tailwind v3.4. It is responsive.

Widget

Author Quentin Rivers

Tailwind v3.4 3.1k 4

Fork Fullscreen

<div class="bg-gray-100 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-3xl font-bold text-center mb-8">Kanban Board</h1>

<div class="flex-1 bg-gray-200 p-4 rounded-lg shadow">
        <h2 class="text-xl font-semibold mb-4">In Progress</h2>
        <ul id="progress-list" class="min-h-[200px] space-y-2">
        </ul>
      </div>

<div id="task-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
      <h3 class="text-lg font-semibold mb-4">Add New Task</h3>
      <input id="task-title" type="text" placeholder="Task Title" class="w-full p-2 mb-4 border rounded">
      <textarea id="task-description" placeholder="Task Description" class="w-full p-2 mb-4 border rounded h-24"></textarea>
      <div class="flex justify-end">
        <button onclick="closeTaskModal()" class="bg-gray-300 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded mr-2">
                    Cancel
                </button>
        <button onclick="addTask()" class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
                    Add Task
                </button>
      </div>
    </div>
  </div>

let currentList = '';

function openTaskModal(listId) {
            currentList = listId;
            document.getElementById('task-modal').classList.remove('hidden');
        }

function closeTaskModal() {
            document.getElementById('task-modal').classList.add('hidden');
            document.getElementById('task-title').value = '';
            document.getElementById('task-description').value = '';
        }

function addTask() {
            const title = document.getElementById('task-title').value;
            const description = document.getElementById('task-description').value;
            if (title) {
                const taskId = 'task-' + Date.now();
                const taskElement = createTaskElement(taskId, title, description);
                document.getElementById(currentList + '-list').appendChild(taskElement);
                closeTaskModal();
            }
        }

function updateTaskStatus(taskId, newListId) {
            console.log(`Task ${taskId} moved to ${newListId}`);
            // Here you would typically update the task status in your backend
        }

function editTask(taskId) {
            const taskElement = document.getElementById(taskId);
            const title = taskElement.querySelector('h3').textContent;
            const description = taskElement.querySelector('p').textContent;
            
            document.getElementById('task-title').value = title;
            document.getElementById('task-description').value = description;
            
            currentList = taskElement.parentElement.id.replace('-list', '');
            openTaskModal(currentList);
            
            taskElement.remove();
        }

function deleteTask(taskId) {
            if (confirm('Are you sure you want to delete this task?')) {
                document.getElementById(taskId).remove();
            }
        }
  </script>
</div>

</html>

Related Examples

Sticky fullpage pages / slides
Sticky full page

harinandana

1 year ago

1k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

dev-fab250

1 year ago

2.4k
Code card with copy Button
this example uses clipboard.js to copy the code

Joost Hietbrink

1 year ago

1.5k
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

2k
partql
partql

sh22gr

8 months ago

866
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Michael Andreuzza

2 years ago

3.2k
Weather Widget with 5-Day Forecast
A clean, modern weather widget built with HTML, Tailwind CSS, and vanilla JavaScript. Perfect for integrating weather information into any web project. Features: - Current weather display with temperature, conditions, and "feels like" temperature - 5-day forecast with daily highs and lows - Temperature unit toggle (Celsius/Fahrenheit) - Weather statistics including wind speed, humidity, and visibility - Fully responsive design that works on all screen sizes - Smooth hover animations and transitions - Semantic HTML5 structure for better accessibility and SEO - Schema.org structured data (JSON-LD) for rich snippets - No dependencies except Tailwind CSS CDN - Easy to customize with Tailwind utility classes Technical Details: - Markup: Semantic HTML5 with proper document structure - Styling: Tailwind CSS v3.x via CDN (utility-first approach) - JavaScript: Vanilla ES6+ (no frameworks or libraries required) - Accessibility: WCAG 2.1 compliant with ARIA labels, semantic elements, and keyboard navigation support - SEO Optimization: - Structured data using JSON-LD (Schema.org WeatherForecast type) - Open Graph and Twitter Card meta tags for social sharing - Semantic heading hierarchy (h1, h2) - Descriptive meta descriptions and keywords - Performance: Lightweight (~8KB HTML), minimal JavaScript, CSS loaded from CDN - Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge) - Mobile-First: Responsive grid layout with breakpoints for mobile, tablet, and desktop - **Customization:** Easily modify colors, layout, and data structure via Tailwind classes - State Management: Simple boolean toggle for temperature units with dynamic DOM updates - SVG Icons: Inline SVG graphics for weather conditions (scalable and customizable) API Integration Ready: The component uses mock data but is structured to easily integrate with weather APIs such as: - OpenWeatherMap - WeatherAPI - Visual Crossing - AccuWeather Simply replace the data object with your API response and map the fields accordingly.

Ijila Itunu

5 months ago

893
Working reading progress bar
show how much of the page has been scrolled

Freja Jensen

3 years ago

13.4k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

3 weeks ago

24
Floating Call Widget
Floating Call Widget - Pure CSS + HTML + JS

Sayista Yazdani

3 weeks ago

56
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Quentin Rivers

2 years ago

7.7k