T

tallpad

Home Lessons Series Topics
Sign in Register for free
Home Topics Series Lessons
Sign in Register for free

Intro

Constantin Druc ยท 03 Jan, 2022

[00:00] In this video we'll see how we can build a search model dialog using HeadlessUI and TailwindCSS. We'll go through styling the elements, displaying the correct keyboard combination based on the user operating system, using the key combination to open the modal, adding transitions to make everything smoother, navigate through the results using arrow keys, and more.

Building a search modal dialog with HeadlessUI and TailwindCSS

Next >
  • 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

Please log in or create a free account.

Sign in with GitHub Sign in with Google
Sign in with e-mail and password

Building a search modal dialog with HeadlessUI and TailwindCSS

Next >
  • 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
© Tallpad 2025
E-mail Youtube Twitter Blog Sign in Register for free