diff --git a/packages/shared/src/utils/Element.js b/packages/shared/src/utils/Element.js
index 2a84db321..0cade5578 100644
--- a/packages/shared/src/utils/Element.js
+++ b/packages/shared/src/utils/Element.js
@@ -19,11 +19,13 @@ import React from 'react';
 const findByType = (children: any, component: any) => {
   const components = [];
 
-  const type = [component.displayName || component.name];
+  const types = Array.isArray(component)
+    ? component.map(c => c.displayName || c.name)
+    : [component.displayName || component.name];
 
   React.Children.forEach(children, (child) => {
     const childType = child && child.type && (child.type.displayName || child.type.name);
-    if (type.includes(childType)) {
+    if (types.includes(childType)) {
       components.push(child);
     }
   });
diff --git a/packages/storybook/src/tailwind-ui/Dropdown.stories.tsx b/packages/storybook/src/tailwind-ui/Dropdown.stories.tsx
new file mode 100644
index 000000000..c46bf9c9e
--- /dev/null
+++ b/packages/storybook/src/tailwind-ui/Dropdown.stories.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import Dropdown from '../../../tailwind-ui/src/components/Dropdown';
+import { FaPaperclip, FaUser } from 'react-icons/fa';
+import { MdSettings } from 'react-icons/md';
+import faircopyLogo from '../assets/faircopy_logo.svg';
+
+export default {
+  title: 'Components/TailwindUI/Dropdown',
+  component: Dropdown
+};
+
+export const Default = () => {
+  return (
+    <Dropdown>
+      <Dropdown.Button>
+        Explore
+      </Dropdown.Button>
+      <Dropdown.Item
+        label='People'
+      />
+      <Dropdown.Item
+        label='Documents'
+      />
+      <Dropdown.Divider />
+      <Dropdown.Item
+        label='Settings'
+      />
+    </Dropdown>
+  );
+};
+
+export const CustomButton = () => {
+  return (
+    <Dropdown>
+      <Dropdown.Button>
+        <img src={faircopyLogo} />
+      </Dropdown.Button>
+      <Dropdown.Item
+        label='People'
+      />
+      <Dropdown.Item
+        label='Documents'
+      />
+      <Dropdown.Divider />
+      <Dropdown.Item
+        label='Settings'
+      />
+    </Dropdown>
+  );
+};
+
+export const Icons = () => {
+  return (
+    <Dropdown>
+      <Dropdown.Button>
+        Explore
+      </Dropdown.Button>
+      <Dropdown.Item
+        icon={FaUser}
+        label='People'
+      />
+      <Dropdown.Item
+        icon={FaPaperclip}
+        label='Documents'
+      />
+      <Dropdown.Divider />
+      <Dropdown.Item
+        icon={MdSettings}
+        label='Settings'
+      />
+    </Dropdown>
+  );
+};
+
+export const Descriptions = () => {
+  return (
+    <Dropdown>
+      <Dropdown.Button>
+        Explore
+      </Dropdown.Button>
+      <Dropdown.Item
+        label='People'
+        description='Members of this project.'
+      />
+      <Dropdown.Item
+        label='Documents'
+        description='Census, tax records, and credit card statements.'
+      />
+      <Dropdown.Divider />
+      <Dropdown.Item
+        label='Settings'
+        description='Project and user settings.'
+      />
+    </Dropdown>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <Dropdown>
+      <Dropdown.Button disabled>
+        Explore
+      </Dropdown.Button>
+      <Dropdown.Item
+        label='People'
+      />
+      <Dropdown.Item
+        label='Documents'
+      />
+      <Dropdown.Divider />
+      <Dropdown.Item
+        label='Settings'
+      />
+    </Dropdown>
+  );
+};
\ No newline at end of file
diff --git a/packages/tailwind-ui/src/components/Dropdown.tsx b/packages/tailwind-ui/src/components/Dropdown.tsx
new file mode 100644
index 000000000..9f2c14149
--- /dev/null
+++ b/packages/tailwind-ui/src/components/Dropdown.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Menu, MenuButton, MenuButtonProps, MenuItem, MenuItems } from '@headlessui/react';
+import { Element } from '@performant-software/shared-components';
+import clsx from 'clsx';
+
+interface Props {
+  children: React.ElementType | React.ElementType[]
+  className?: string
+}
+
+const Dropdown: React.FC<Props> = (props) => {
+  const button = Element.findByType(props.children, Dropdown.Button);
+  const menuContents = Element.findByType(props.children, [Dropdown.Item, Dropdown.Divider]);
+
+  return (
+    <Menu>
+      {button}
+      <MenuItems
+        anchor='bottom start'
+        className={clsx(
+          'flex flex-col bg-zinc-50 border border-zinc-200 rounded-xl shadow-lg focus:outline-none',
+          props.className
+        )}
+      >
+        {menuContents}
+      </MenuItems>
+    </Menu>
+  );
+};
+
+Dropdown.Button = (props: MenuButtonProps) => {
+  return (
+    <MenuButton
+      className='border border-zinc-200 bg-white text-zinc-500 shadow-sm rounded-lg py-2 px-3 font-sm font-semibold outline-offset-2 outline-2 outline-transparent data-active:outline-primary data-disabled:opacity-50'
+      {...props}
+    />
+  );
+};
+
+interface DropdownItemProps {
+  label?: string
+  description?: string
+  icon?: React.FC
+}
+
+Dropdown.Item = (props: DropdownItemProps) => {
+  return (
+    <MenuItem
+      className='bg-red px-4 py-2 hover:cursor-pointer text-zinc-500 flex flex-col text-sm'
+    >
+      <div>
+        <span className='flex gap-3 items-center'>
+          {props.icon && <props.icon size={16} />}
+          <span className='text-black h-full'>{props.label}</span>
+        </span>
+        {props.description && <p className='text-zinc-500 text-xs'>{props.description}</p>}
+      </div>
+    </MenuItem>
+  );
+};
+
+Dropdown.Divider = () => {
+  return (
+    <div className='w-auto h-px bg-zinc-200 mx-4 my-1' />
+  );
+};
+
+export default Dropdown;
diff --git a/packages/tailwind-ui/src/index.ts b/packages/tailwind-ui/src/index.ts
index 597323a47..a605705f3 100644
--- a/packages/tailwind-ui/src/index.ts
+++ b/packages/tailwind-ui/src/index.ts
@@ -1 +1,5 @@
+export { default as Button } from './components/Button';
+export { default as Dropdown } from './components/Dropdown';
+export { default as Input } from './components/Input';
+export { default as Navbar } from './components/Navbar';
 export { default as Card } from './components/Card';