Building a search modal with HeadlessUI and TailwindCSS
In this video we'll go over creating a search modal dialog using HeadlessUI and TailwindCSS. We'll tackle things like transitions, querying the user's platform to display the correct keyboard shortcut, use the shortcut to open the modal, navigate search results using the keyboard, and more.
Code snippets: https://tallpad.com/series/search-mod...
▬ Chapters ▬▬▬▬▬▬▬▬▬▬
00:00 - Introduction
00:23 - Styling the open modal button
02:43 - Keyboard shortcut based on the operating system
04:04 - Styling the modal dialog
07:27 - Open the modal using a keyboard shortcut
08:52 - Modal dialog transitions
12:15 - Styling the search form
15:30 - Displaying and styling the search results
22:08 - Navigate list items using the arrow keys