Here's the fully functional Kanban board implemented in a single HTML file using vanilla JavaScript, meeting all the specified requirements:
```html
Kanban Board
Kanban Board
Backlog
In Progress
Review
Done
```
This HTML file includes the following:
1. Tailwind CSS CDN is used for styling.
2. The Kanban board structure is created with columns and cards.
3. Cards are draggable across columns using JavaScript event listeners.
4. Cards can be edited in place by modifying the input field within each card.
5. Cards are persisted in localStorage, so the state survives page reloads.
6. Deletable cards trigger a confirmation prompt before removal.
7. Moving a card to the "Done" column triggers a confetti animation using CSS animations and JavaScript.
8. The code is thoroughly commented for clarity.
9. Modern and vibrant design is achieved through Tailwind CSS classes and color choices.
The provided selectors (data-testid attributes) are included as requested, ensuring compatibility with automated functional tests.
You can copy this HTML code into a file (e.g., `kanban.html`) and open it in a web browser to see the fully functional Kanban board in action.