Building a search modal dialog with HeadlessUI and TailwindCSS

In this series we're going to build a search dialog using HeadlessUI and TailwindCSS. We'll go over things like styling, transitions, keyboard shortcuts, and so on.

Start watching

1. Intro

00:25
2. Search modal button

02:22
3. Button label based on the operating system

01:22
4. Styling the modal dialog

02:29
5. Open the modal using a keyboard shortcut

02:17
6. Modal dialog transitions

03:30
7. Styling the search form

03:15
8. Show and style the search results

06:42
9. Navigate list items using arrow keys

08:42