Tailwind CSS Dropdown Examples
Ready-made dropdown menus for Tailwind CSS, built with the dropdown, popover, and combobox components. Click an example to open its page and copy the code.
Profile Dropdown
A profile dropdown for Tailwind CSS, the user menu behind an avatar with an account header and shortcuts. Built with the dropdown and avatar components.
<button
type="button"
id="profile-dropdown-trigger"
class="avatar size-9 shadow-xs"
aria-label="Open user menu"
>
<img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">LN</span>
</button>
<div
class="dropdown w-60"
data-sp-toggle="#profile-dropdown-trigger"
data-sp-placement="bottom-end"
>
<div class="item item-xs px-2 py-1.5">
<div class="item-media">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">LN</span></span
>
</div>
<div class="item-content">
<div class="item-title">Leila Navarro</div>
<div class="item-description">[email protected]</div>
</div>
</div>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle></svg
>Profile<span class="dropdown-shortcut">⇧⌘P</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line></svg
>Billing<span class="dropdown-shortcut">⌘B</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path>
<circle cx="12" cy="12" r="3"></circle></svg
>Settings<span class="dropdown-shortcut">⌘,</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
>Team</button
><button class="dropdown-item" type="button" id="profile-dropdown-invite">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg
>Invite members<svg
class="ms-auto rtl:rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path></svg
>Support
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item dropdown-item-destructive" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
<path d="m16 17 5-5-5-5"></path>
<path d="M21 12H9"></path></svg
>Log out<span class="dropdown-shortcut">⇧⌘Q</span>
</button>
</div>
<div
class="dropdown dropdown-sub w-44"
data-sp-toggle="#profile-dropdown-invite"
data-sp-mode="hover"
data-sp-placement="right-start"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg
>Email</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
></path></svg
>Message
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 12h8"></path>
<path d="M12 8v8"></path></svg
>More...
</button>
</div>Notifications Dropdown
A notifications dropdown for Tailwind CSS with an unread badge on the bell, a scrollable feed, and quick actions. Built with the popover and item components.
<button
type="button"
id="notifications-trigger"
class="btn btn-outline btn-icon"
aria-label="Open notifications"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
<path
d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
></path></svg
><span class="btn-badge bg-destructive">3</span>
</button>
<div
class="popover w-84 gap-0 overflow-clip p-0"
data-sp-toggle="#notifications-trigger"
data-sp-placement="bottom-end"
>
<div class="item item-xs ps-3.5 pe-2">
<div class="item-content"><div class="item-title">Notifications</div></div>
<div class="item-actions">
<button
type="button"
id="notifications-menu"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Notification options"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div
class="dropdown w-52"
data-sp-toggle="#notifications-menu"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 7 17l-5-5"></path>
<path d="m22 10-7.5 7.5L13 16"></path></svg
>Mark all read</button
><a class="dropdown-item" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 3h6v6"></path>
<path d="M10 14 21 3"></path>
<path
d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
></path></svg
>View all notifications</a
>
</div>
<div class="separator"></div>
<div
class="scroll-fade scrollbar-none max-h-80 overflow-y-auto p-1"
role="list"
>
<a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">MO</span
><span class="avatar-badge bg-background shadow-sm text-rose-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Maya Okonkwo
<span class="font-normal text-muted-foreground"
>liked your photo</span
>
Golden hour in Lisbon</span
>
</div>
<div class="item-description">2 minutes ago</div>
</div>
<span
class="mt-1.5 size-2 shrink-0 rounded-full bg-blue-500"
aria-label="Unread"
></span></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">DR</span
><span class="avatar-badge bg-background shadow-sm text-blue-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Devin Ross
<span class="font-normal text-muted-foreground"
>replied to your comment on</span
>
Weekly design critique</span
>
</div>
<div class="item-description">18 minutes ago</div>
</div>
<span
class="mt-1.5 size-2 shrink-0 rounded-full bg-blue-500"
aria-label="Unread"
></span
></a>
<div class="item item-xs items-start" role="listitem">
<div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">PR</span
><span class="avatar-badge bg-background shadow-sm text-green-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Priya Raman
<span class="font-normal text-muted-foreground"
>wants to follow you</span
></span
>
</div>
<div class="item-description">1 hour ago</div>
<div class="mt-1.5 flex gap-2">
<button class="btn btn-xs" type="button">Accept</button
><button class="btn btn-outline btn-xs" type="button">Decline</button>
</div>
</div>
<span
class="mt-1.5 size-2 shrink-0 rounded-full bg-blue-500"
aria-label="Unread"
></span>
</div>
<a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">TL</span
><span class="avatar-badge bg-background shadow-sm text-violet-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="4"></circle>
<path
d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"
></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Theo Lindqvist
<span class="font-normal text-muted-foreground"
>mentioned you in</span
>
#launch-planning</span
>
</div>
<div class="item-description">Yesterday at 4:12 PM</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573496527892-904f897eb744?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">GA</span
><span class="avatar-badge bg-background shadow-sm text-amber-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m17 2 4 4-4 4"></path>
<path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
<path d="m7 22-4-4 4-4"></path>
<path d="M21 13v1a4 4 0 0 1-4 4H3"></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Grace Adeyemi
<span class="font-normal text-muted-foreground"
>reposted your photo</span
>
Golden hour in Lisbon</span
>
</div>
<div class="item-description">Tuesday</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1705645930353-0e335311ef20?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">LM</span
><span class="avatar-badge bg-background shadow-sm text-rose-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Luca Moretti
<span class="font-normal text-muted-foreground"
>liked your comment on</span
>
Weekly design critique</span
>
</div>
<div class="item-description">Monday</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1752486268240-0507bb1ebc7e?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">CL</span
><span class="avatar-badge bg-background shadow-sm text-green-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Camille Laurent
<span class="font-normal text-muted-foreground"
>started following you</span
></span
>
</div>
<div class="item-description">Last week</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1634149134664-ca3598f29da5?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">ED</span
><span class="avatar-badge bg-background shadow-sm text-blue-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Emilie Dahl
<span class="font-normal text-muted-foreground"
>commented on your photo</span
>
Golden hour in Lisbon</span
>
</div>
<div class="item-description">Last week</div>
</div></a
>
</div>
</div>Country Dropdown
A searchable country dropdown for Tailwind CSS with flags, recent picks, and type-to-filter, submitting like a native select. Built with the combobox component.
<div class="field w-full max-w-72">
<label class="label" for="country-picker-input">Country</label>
<div class="input-group" id="country-picker-field">
<input
class="input"
id="country-picker-input"
placeholder="Select a country"
value="🇵🇹 Portugal"
/><span class="input-group-addon input-group-addon-end"
><button
class="btn btn-ghost btn-xs btn-icon"
type="button"
tabindex="-1"
aria-label="Open list"
>
<svg
class="text-muted-foreground"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 9 6 6 6-6"></path>
</svg></button
></span>
</div>
</div>
<div class="combobox" data-sp-toggle="#country-picker-field">
<div class="combobox-empty">No countries found.</div>
<div class="combobox-list scrollbar scrollbar-sm">
<div class="combobox-group">
<div class="combobox-label">Recent</div>
<div class="combobox-item" data-sp-label="🇵🇹 Portugal">
<input type="radio" name="country" checked="" value="pt" /><span
>🇵🇹</span
>
Portugal
</div>
<div class="combobox-item" data-sp-label="🇺🇸 United States">
<input type="radio" name="country" value="us" /><span>🇺🇸</span> United
States
</div>
</div>
<div class="combobox-group">
<div class="combobox-label">All countries</div>
<div class="combobox-item" data-sp-label="🇦🇷 Argentina">
<input type="radio" name="country" value="ar" /><span>🇦🇷</span>
Argentina
</div>
<div class="combobox-item" data-sp-label="🇦🇺 Australia">
<input type="radio" name="country" value="au" /><span>🇦🇺</span>
Australia
</div>
<div class="combobox-item" data-sp-label="🇧🇷 Brazil">
<input type="radio" name="country" value="br" /><span>🇧🇷</span> Brazil
</div>
<div class="combobox-item" data-sp-label="🇨🇦 Canada">
<input type="radio" name="country" value="ca" /><span>🇨🇦</span> Canada
</div>
<div class="combobox-item" data-sp-label="🇨🇳 China">
<input type="radio" name="country" value="cn" /><span>🇨🇳</span> China
</div>
<div class="combobox-item" data-sp-label="🇪🇬 Egypt">
<input type="radio" name="country" value="eg" /><span>🇪🇬</span> Egypt
</div>
<div class="combobox-item" data-sp-label="🇫🇷 France">
<input type="radio" name="country" value="fr" /><span>🇫🇷</span> France
</div>
<div class="combobox-item" data-sp-label="🇩🇪 Germany">
<input type="radio" name="country" value="de" /><span>🇩🇪</span> Germany
</div>
<div class="combobox-item" data-sp-label="🇮🇳 India">
<input type="radio" name="country" value="in" /><span>🇮🇳</span> India
</div>
<div class="combobox-item" data-sp-label="🇮🇹 Italy">
<input type="radio" name="country" value="it" /><span>🇮🇹</span> Italy
</div>
<div class="combobox-item" data-sp-label="🇯🇵 Japan">
<input type="radio" name="country" value="jp" /><span>🇯🇵</span> Japan
</div>
<div class="combobox-item" data-sp-label="🇰🇪 Kenya">
<input type="radio" name="country" value="ke" /><span>🇰🇪</span> Kenya
</div>
<div class="combobox-item" data-sp-label="🇲🇽 Mexico">
<input type="radio" name="country" value="mx" /><span>🇲🇽</span> Mexico
</div>
<div class="combobox-item" data-sp-label="🇳🇱 Netherlands">
<input type="radio" name="country" value="nl" /><span>🇳🇱</span>
Netherlands
</div>
<div class="combobox-item" data-sp-label="🇳🇿 New Zealand">
<input type="radio" name="country" value="nz" /><span>🇳🇿</span> New
Zealand
</div>
<div class="combobox-item" data-sp-label="🇳🇬 Nigeria">
<input type="radio" name="country" value="ng" /><span>🇳🇬</span> Nigeria
</div>
<div class="combobox-item" data-sp-label="🇰🇷 South Korea">
<input type="radio" name="country" value="kr" /><span>🇰🇷</span> South
Korea
</div>
<div class="combobox-item" data-sp-label="🇪🇸 Spain">
<input type="radio" name="country" value="es" /><span>🇪🇸</span> Spain
</div>
<div class="combobox-item" data-sp-label="🇸🇪 Sweden">
<input type="radio" name="country" value="se" /><span>🇸🇪</span> Sweden
</div>
<div class="combobox-item" data-sp-label="🇬🇧 United Kingdom">
<input type="radio" name="country" value="gb" /><span>🇬🇧</span> United
Kingdom
</div>
</div>
</div>
</div>Mega Menu
A mega menu for Tailwind CSS that opens on hover with grouped icon links, short descriptions, and an announcement column. Built with the popover component.
<button type="button" id="mega-menu-trigger" class="group btn btn-ghost btn-sm">
Resources<svg
class="size-3 text-muted-foreground transition-transform group-aria-expanded:rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="popover w-160 max-w-[calc(100vw-2rem)] gap-0 overflow-clip p-0 md:flex-row"
data-sp-toggle="#mega-menu-trigger"
data-sp-mode="hover"
data-sp-placement="bottom"
>
<div class="flex flex-1 flex-col gap-0.5 p-3">
<a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 7v14"></path>
<path
d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
></path>
</svg>
</div>
<div class="item-content">
<div class="item-title">
Blog<span class="badge badge-secondary">New</span>
</div>
<div class="item-description">
The latest industry news and guides curated by our expert team.
</div>
</div></a
><a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
></path>
<path d="M20 2v4"></path>
<path d="M22 4h-4"></path>
<circle cx="4" cy="20" r="2"></circle>
</svg>
</div>
<div class="item-content">
<div class="item-title">Customer stories</div>
<div class="item-description">
Learn how teams use Acme to move faster with fewer tools.
</div>
</div></a
><a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"
></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
</div>
<div class="item-content">
<div class="item-title">Video tutorials</div>
<div class="item-description">
Get up and running on our newest features and in-depth guides.
</div>
</div></a
><a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 7v14"></path>
<path d="M16 12h2"></path>
<path d="M16 8h2"></path>
<path
d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
></path>
<path d="M6 12h2"></path>
<path d="M6 8h2"></path>
</svg>
</div>
<div class="item-content">
<div class="item-title">Documentation</div>
<div class="item-description">
In-depth articles on our tools and technologies to empower teams.
</div>
</div></a
>
</div>
<div
class="flex w-full shrink-0 flex-col gap-3 border-s bg-muted/40 p-4 md:w-75"
>
<img
src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=640&h=427&fit=crop&auto=format&q=100"
alt="Tidy workspace with a laptop"
class="h-37 w-full rounded-lg border object-cover"
/>
<div class="flex flex-col gap-1">
<span class="text-sm font-medium"
>We've just released an update!</span
><span class="text-xs text-muted-foreground"
>A redesigned dashboard, faster search, and a stack of smaller fixes
just landed.</span
>
</div>
<div class="flex items-center gap-4">
<a
class="text-xs font-medium text-muted-foreground hover:text-foreground"
href="#"
>Dismiss</a
><a class="text-xs font-medium hover:text-muted-foreground" href="#"
>Changelog</a
>
</div>
</div>
</div>Table Row Actions Dropdown
A table row actions dropdown for Tailwind CSS, opened from an ellipsis button on each row, with delete kept apart. Built with the table and dropdown components.
<div class="card card-sm w-full gap-0">
<div class="card-header border-b">
<h3 class="card-title">Files uploaded</h3>
<p class="card-description max-sm:col-start-1">7 files · 52.1 MB</p>
<div
class="card-action flex items-center gap-2 self-end max-sm:col-start-1 max-sm:row-start-3 max-sm:mt-2 max-sm:justify-self-start"
>
<button class="btn btn-outline btn-sm" type="button">Download all</button
><button class="btn btn-sm" type="button">
<svg
class="icon-start"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 3v12"></path>
<path d="m17 8-5-5-5 5"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg
>Upload
</button>
</div>
</div>
<div class="table-container">
<table class="table">
<thead class="table-header bg-muted/40">
<tr class="table-row hover:bg-transparent">
<th class="table-head w-10 ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
data-sp-toggle-all="true"
aria-label="Select all files"
/>
</th>
<th class="table-head">File name</th>
<th class="table-head w-32">File size</th>
<th class="table-head w-40">Date uploaded</th>
<th class="table-head w-44">Uploaded by</th>
<th class="table-head w-11 pe-4"></th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Tech requirements.pdf"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-red-500"
>pdf</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Tech requirements.pdf</span
><span class="text-xs text-muted-foreground">200 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">200 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Leila Navarro</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-0"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Tech requirements.pdf"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-0"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard screenshot.jpg"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-purple-500"
>jpg</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard screenshot.jpg</span
><span class="text-xs text-muted-foreground">720 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">720 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Maya Okonkwo</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-1"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard screenshot.jpg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-1"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard prototype recording.mp4"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-blue-600"
>mp4</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard prototype recording.mp4</span
><span class="text-xs text-muted-foreground">16 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">16 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 2, 2026
</td>
<td class="table-cell text-[13px]">Devin Ross</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-2"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard prototype recording.mp4"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-2"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard prototype FINAL.fig"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-violet-600"
>fig</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard prototype FINAL.fig</span
><span class="text-xs text-muted-foreground">4.2 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">4.2 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 6, 2026
</td>
<td class="table-cell text-[13px]">Priya Raman</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-3"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard prototype FINAL.fig"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-3"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select UX design guidelines.docx"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-blue-500"
>docx</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>UX design guidelines.docx</span
><span class="text-xs text-muted-foreground">400 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">400 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 8, 2026
</td>
<td class="table-cell text-[13px]">Grace Adeyemi</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-4"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for UX design guidelines.docx"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-4"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard interaction.aep"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-indigo-500"
>aep</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard interaction.aep</span
><span class="text-xs text-muted-foreground">12 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">12 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 6, 2026
</td>
<td class="table-cell text-[13px]">Theo Lindqvist</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-5"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard interaction.aep"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-5"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Briefing call recording.mp3"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-pink-500"
>mp3</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Briefing call recording.mp3</span
><span class="text-xs text-muted-foreground">18.6 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">18.6 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Camille Laurent</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-6"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Briefing call recording.mp3"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown w-54"
data-sp-toggle="#file-menu-6"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="card-footer justify-between border-t text-xs text-muted-foreground"
>
<span>Showing 7 of 42 files</span>
<div class="flex gap-1.5">
<button class="btn btn-outline btn-sm" type="button" disabled="">
Previous</button
><button class="btn btn-outline btn-sm" type="button">Next</button>
</div>
</div>
</div>