Response Details (ID: 336 - UIGEN-X-4B-0729)

Text Before HTML:

We are creating a project management tool dashboard with a Kanban board layout and draggable task cards that show due dates.
 The design should be inspired by the provided template but tailored for a project management tool.
 We'll use Tailwind CSS and vanilla JavaScript for the drag-and-drop functionality.

 Steps:
 1. Define a color scheme suitable for a project management tool (e.g., blues, greens, or a professional palette).
 2. Create a Kanban board with columns (e.g., To Do, In Progress, Done) and task cards that can be dragged between columns.
 3. Each task card should display:
    - Task title
    - Description (optional)
    - Due date
    - Possibly an assignee or priority indicator
 4. Implement drag-and-drop using the HTML5 Drag and Drop API.

 We'll structure the page as follows:
   - Header with the title and maybe a button to add a new task.
   - Main content: the Kanban board with columns.

 We'll use the following Tailwind classes for styling and layout.

 Let's choose a color scheme:
   Primary: #3B82F6 (a nice blue)
   Secondary: #10B981 (a green for completed tasks)
   Background: #F9FAFB (light gray)
   Text: #1F2937 (dark gray)

 We'll define these in the style section and also use Tailwind's arbitrary values.

 We'll also need to handle the drag-and-drop events.

 Note: We are not using any external libraries for drag-and-drop to keep it vanilla.

 Implementation:

   - Each column will be a drop zone (ondragover and ondrop events).
   - Each task card will be draggable (draggable="true").

 We'll create a sample data structure for tasks and columns.

 Example data:

   const columns = [
     { id: 'todo', title: 'To Do' },
     { id: 'inprogress', title: 'In Progress' },
     { id: 'done', title: 'Done' }
   ];

   const tasks = [
     { id: 1, title: 'Task 1', description: 'Description for task 1', dueDate: '2023-12-31', columnId: 'todo' },
     ... 
   ];

 We'll generate the board from this data.

 We'll also add functionality to add a new task (if time permits, but the prompt doesn't specify, so we'll focus on the board and drag-and-drop).

 Let's code accordingly.


# Project Management Kanban Board Dashboard

I'll create a modern project management tool with a Kanban board layout featuring draggable task cards that show due dates. The design will be clean, professional, and focused on productivity.

Generated HTML Page:

Text After HTML:

## Key Features of the Project Management Dashboard

1. **Modern Kanban Board Layout**:
   - Four columns: To Do, In Progress, Review, and Done
   - Each column shows task counts with color-coded indicators
   - Clean, card-based design with subtle shadows and rounded corners

2. **Task Cards with Due Dates**:
   - Each card displays a due date with a colored badge
   - Priority indicators (High, Medium, Low) with color coding
   - Assignee avatars showing team members
   - Task descriptions and metadata

3. **Drag-and-Drop Functionality**:
   - Smooth drag-and-drop between columns
   - Visual feedback during dragging
   - Console logging for task movement tracking

4. **Dashboard Overview**:
   - Stats cards showing total tasks, completed, in progress, and overdue
   - Recent activity feed showing team updates
   - Responsive design that works on all devices

5. **Visual Design**:
   - Professional color scheme with primary blues and accent colors
   - Clean typography with the Inter font family
   - Subtle animations and hover effects for better UX
   - Consistent spacing and visual hierarchy

The dashboard is ready to use - simply copy the code into an HTML file and open it in a browser to see the project management tool in action!