<div className="bg-white dark:bg-neutral-900 shadow">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="flex h-16 justify-between">
      <div className="flex">
        <div className="flex flex-shrink-0 items-center">
          <div className="h-8 w-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg"></div>
          <span className="ml-2 text-lg font-semibold">Brand</span>
        </div>
        <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
          {navigation.map((item) => (
            <a
              key={item.name}
              href={item.href}
              className={`inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium ${
                item.current
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-neutral-500 hover:border-neutral-300'
              }`}
            >
              <item.icon className="h-4 w-4 mr-2" />
              {item.name}
            </a>
          ))}
        </div>
      </div>
    </div>
  </div>
</div>

<Disclosure>
  {({ open }) => (
    <>
      <Disclosure.Button className="flex w-full items-center justify-between rounded-lg bg-neutral-800 px-3 py-2 text-left text-sm font-medium text-white hover:bg-neutral-700">
        <span className="flex items-center">
          <HomeIcon className="h-4 w-4 mr-3" />
          Dashboard
        </span>
        <ChevronRightIcon
          className={`h-4 w-4 transition-transform ${open ? 'rotate-90' : ''}`}
        />
      </Disclosure.Button>
      <Disclosure.Panel className="mt-1 space-y-1 pl-6">
        <a href="#" className="block rounded-lg px-3 py-2 text-sm text-neutral-300 hover:bg-neutral-700">
          Overview
        </a>
      </Disclosure.Panel>
    </>
  )}
</Disclosure>

<nav className="flex" aria-label="Breadcrumb">
  <ol className="flex items-center space-x-4">
    {breadcrumbNavigation.map((item, index) => (
      <li key={item.name}>
        <div className="flex items-center">
          {index > 0 && (
            <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-neutral-400 mr-4" />
          )}
          <a
            href={item.href}
            className={`text-sm font-medium ${
              item.current
                ? 'text-blue-600'
                : 'text-neutral-500 hover:text-neutral-700'
            }`}
            aria-current={item.current ? 'page' : undefined}
          >
            {item.name}
          </a>
        </div>
      </li>
    ))}
  </ol>
</nav>

<Tab.Group>
  <Tab.List className="flex space-x-1 bg-neutral-100 p-1">
    <Tab
      className={({ selected }) =>
        `w-full rounded-lg py-2.5 text-sm font-medium leading-5 ${
          selected
            ? 'bg-white text-blue-700 shadow'
            : 'text-neutral-700 hover:bg-white/[0.12]'
        }`
      }
    >
      Recent
    </Tab>
  </Tab.List>
  <Tab.Panels className="p-6">
    <Tab.Panel>
      <h4 className="font-medium">Recent Items</h4>
      <p>Your most recently accessed items.</p>
    </Tab.Panel>
  </Tab.Panels>
</Tab.Group>

<div>
  <label htmlFor="email" className="block text-sm font-medium text-neutral-700 mb-2">
    Email Address
  </label>
  <input
    type="email"
    id="email"
    className={`block w-full rounded-lg border px-3 py-2 shadow-sm focus:outline-none focus:ring-2 ${
      errors.email
        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
        : 'border-neutral-300 focus:border-blue-500 focus:ring-blue-500'
    }`}
    placeholder="Enter your email"
  />
  {errors.email && (
    <div className="mt-2 flex items-center text-sm text-red-600">
      <ExclamationCircleIcon className="h-4 w-4 mr-1" />
      {errors.email}
    </div>
  )}
</div>

<Combobox value={selected} onChange={setSelected}>
  <div className="relative mt-1">
    <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm">
      <Combobox.Input
        className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
        displayValue={(person) => person.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
        <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
      </Combobox.Button>
    </div>
    <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
      {filteredPeople.map((person) => (
        <Combobox.Option key={person.id} className={({ active }) => `relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-blue-600 text-white' : 'text-gray-900'}`} value={person}>
          {({ selected, active }) => (
            <>
              <span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
                {person.name}
              </span>
              {selected ? (
                <span className={`absolute inset-y-0 left-0 flex items-center pl-3 ${active ? 'text-white' : 'text-blue-600'}`}>
                  <CheckIcon className="h-5 w-5" aria-hidden="true" />
                </span>
              ) : null}
            </>
          )}
        </Combobox.Option>
      ))}
    </Combobox.Options>
  </div>
</Combobox>

<Switch.Group>
  <div className="flex items-center justify-between">
    <div className="flex flex-col">
      <Switch.Label as="span" className="text-sm font-medium text-gray-900">
        Email Notifications
      </Switch.Label>
      <Switch.Description as="span" className="text-sm text-gray-500">
        Receive email updates about your account.
      </Switch.Description>
    </div>
    <Switch
      checked={enabled}
      onChange={setEnabled}
      className={`${enabled ? 'bg-blue-600' : 'bg-gray-200'} relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`}
    >
      <span
        className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
      />
    </Switch>
  </div>
</Switch.Group>