Component library patterns (Headless UI) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Headless UI <Menu> component with Tailwind CSS.

Tailwind

<Menu>
  <Menu.Button className="px-4 py-2 bg-blue-600 text-white rounded">Options</Menu.Button>
  <Menu.Items className="mt-2 w-48 bg-white shadow-lg rounded">
    <Menu.Item>
      {({ active }) => (
        <button className={`${active ? '[1]' : ''} block w-full text-left px-4 py-2`}>Account</button>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>

Drag options to blanks, or click blank then click option'

Abg-blue-500

Bitalic

Cborder

Dtext-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using text color instead of background color for active state.

Forgetting to use template literals for conditional class names.

The active state in Headless UI Menu.Item lets you style the item when hovered or focused. Using bg-blue-500 highlights the item with a blue background on active.

2fill in blank

medium

Complete the code to add keyboard accessibility to the Headless UI <Disclosure> component.

Tailwind

<Disclosure>
  <Disclosure.Button className="px-4 py-2 bg-gray-700 text-white rounded">
    [1]
  </Disclosure.Button>
  <Disclosure.Panel className="p-4 bg-gray-100">
    This is the hidden content revealed by the button.
  </Disclosure.Panel>
</Disclosure>

Drag options to blanks, or click blank then click option'

AToggle Content <button>

B<span>Toggle Content</span>

CToggle Content

DToggle Content <ChevronDownIcon />

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain text only without any visual toggle indicator.

Wrapping the button text inside another button element.

Including an icon like <ChevronDownIcon /> inside the Disclosure.Button helps users understand the toggle action visually and supports keyboard navigation.

3fill in blank

hard

Fix the error in the Headless UI component by completing the missing prop.

Tailwind

<Tab.Group [1]>
  <Tab.List className="flex space-x-1 bg-blue-900/20 p-1 rounded">
    <Tab className={({ selected }) => selected ? 'bg-white text-blue-700' : 'text-blue-100'}>Tab 1</Tab>
    <Tab className={({ selected }) => selected ? 'bg-white text-blue-700' : 'text-blue-100'}>Tab 2</Tab>
  </Tab.List>
  <Tab.Panels>
    <Tab.Panel className="p-4 bg-white">Content 1</Tab.Panel>
    <Tab.Panel className="p-4 bg-white">Content 2</Tab.Panel>
  </Tab.Panels>
</Tab.Group>

Drag options to blanks, or click blank then click option'

Aindex={0}

BdefaultIndex={0}

CinitialIndex={0}

DselectedIndex={0}

Attempts:

3 left

💡 Hint

Common Mistakes

Using selectedIndex which requires controlled state.

Using non-existent props like initialIndex or index.

The defaultIndex prop sets the initially selected tab in Headless UI's Tab.Group. This fixes the error by defining which tab is active on load.

4fill in blank

hard

Fill both blanks to create a Headless UI <Listbox> with Tailwind styling and accessibility.

Tailwind

<Listbox value={selected} onChange={setSelected}>
  <Listbox.Button className="relative w-48 cursor-default rounded bg-white py-2 pl-3 pr-10 text-left shadow-md">
    [1]
  </Listbox.Button>
  <Listbox.Options className="absolute mt-1 max-h-60 w-48 overflow-auto rounded bg-white py-1 text-base shadow-lg">
    [2]
  </Listbox.Options>
</Listbox>

Drag options to blanks, or click blank then click option'

A{selected.name}

B{options.map((option) => ( <Listbox.Option key={option.id} value={option}> {option.name} </Listbox.Option> ))}

C{selected.value}

D{items.map(item => <Listbox.Option key={item.id} value={item}>{item.label}</Listbox.Option>)}

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names like value or label inconsistently.

Not mapping over the correct array of options.

The Listbox.Button shows the selected option's name with {selected.name}. The Listbox.Options renders all options by mapping over options and creating Listbox.Option elements.

5fill in blank

hard

Fill all three blanks to build a Headless UI <Popover> with accessible button, panel, and transition.

Tailwind

<Popover className="relative">
  <Popover.Button className="inline-flex justify-center rounded-md bg-indigo-600 px-4 py-2 text-white">
    [1]
  </Popover.Button>
  <Transition
    enter="transition duration-200 ease-out"
    enterFrom="opacity-0 scale-95"
    enterTo="opacity-100 scale-100"
    leave="transition duration-150 ease-in"
    leaveFrom="opacity-100 scale-100"
    leaveTo="opacity-0 scale-95"
  >
    <Popover.Panel className="absolute z-10 mt-3 w-screen max-w-sm rounded bg-white p-4 shadow-lg">
      [2]
      [3]
    </Popover.Panel>
  </Transition>
</Popover>

Drag options to blanks, or click blank then click option'

A"Open Menu"

B<p>This is the popover content.</p>

C<button className="mt-2 px-3 py-1 bg-blue-500 text-white rounded">Close</button>

D"Close Menu"

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the button label empty or unclear.

Not including a close button inside the popover panel for keyboard users.

The Popover.Button needs a label like "Open Menu". The Popover.Panel contains the content paragraph and a close button for accessibility and keyboard control.