Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev

Today we're going to a build a Notion inspired drag and drop kanban board using React, TailwindCSS, and Framer Motion. We'll do this entirely from scratch, this way you can take these same skills and build other drag and drop experiences.

#javascript #reactjs #webdevelopment

📚 Video Links
Source code: https://www.hover.dev/components/boards

🔗 My Links
TikTok:   / tomisloading  
Instagram:   / tomisloading  
GitHub: https://github.com/TomIsLoading
Twitter:   / tomisloading  
Discord & more: https://linktr.ee/tomisloading
Portfolio templates: https://tomisloading.gumroad.com/

0:00 - Introduction
0:34 - Layout and style columns
3:37 - Layout and style cards
5:50 - Style drop indicators
7:20 - Layout and style delete section
8:46 - Setup form
11:24 - Deleting cards
13:09 - Add layout animations
14:11 - Column highlighting
15:01 - Highlight indicators
17:25 - Moving cards between columns
19:18 - Persisting cards on page refresh