Tailwind CSS Ecommerce Menus Blocks

Ecommerce Menus

Account, wishlist, favorites, and product discovery menus for ecommerce shopping flows.

Profile trigger opens an auth card first, then a short list of account and order links below it.

Create a responsive UI block named "Signed-Out Account Menu" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ui-components/ecommerce-menus/#signed-out-account-menu. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: ui-components/ecommerce-menus
- Block ID: signed-out-account-menu
- Source description: Profile trigger opens an auth card first, then a short list of account and order links below it.
- Preview iframe: https://preline.co/blocks/ui-components/ecommerce-menus/iframes/pro/signed-out-account-menu.html (repo path: blocks/ui-components/ecommerce-menus/iframes/pro/signed-out-account-menu.html)
- Source markup reference:
  - partials/pro/storefront/dropdowns/account.html
  - partials/pro/storefront/sources/list-group-with-gray-bg-hover.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Trigger is a `size-9.5` rounded-full button containing a `size-4` Lucide user glyph - no avatar photo in this state.
  - Panel is `w-full sm:w-80`, edge-to-edge on mobile and `sm:rounded-xl` with a shadow on desktop.
  - It opens with a `p-5 bg-surface rounded-lg` card: centred heading `Account`, a full-width secondary-token button reading `Log in`, then `Don't have an account?` followed by an underlined `Register` link.
  - Below the card sit exactly three list rows in order: `My orders`, `Order status`, `Help`, each with a `size-4` Lucide icon in the leading slot.
  - There is no avatar, no user name or email, no payment/gift-card rows, and no `Logout` row - those belong to the signed-in variant of the same partial.
  - HSDropdown with `[--auto-close:inside]` is the only plugin; the preview force-opens the panel on load, so the block's real default state is closed.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                      <button id="hs-pro-shadnli" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/><circle cx="12" cy="7" r="4"/></svg>
                      </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-80 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shadnli">
                        <div class="p-1">
                          
                          <div class="p-5 bg-surface rounded-lg">
                            <div class="mb-3 text-center">
                              <span class="block font-medium text-foreground">
                                Account
                              </span>
                            </div>

<p class="mt-3 text-center text-sm text-muted-foreground-1">
                              Don't have an account?
                              <a class="text-[13px] text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/create-account.html">
                                Register
                              </a>
                            </p>
                          </div>

<div class="-mx-3 py-3 px-5">
                            
                            <div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                              <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/my-orders.html">
                                <div class="grow">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>

<div class="grow">
                                      <span class="text-sm text-foreground">
                                        My orders
                                      </span>
                                    </div>
                                  </div>
                                </div>
                                <div class="ms-auto">
                                  <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/></svg>
                                </div>
                              </a>
                            </div>

<div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                              <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/order-status.html">
                                <div class="grow">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0"/><circle cx="12" cy="8" r="2"/><path d="M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712"/></svg>

<div class="grow">
                                      <span class="text-sm text-foreground">
                                        Order status
                                      </span>
                                    </div>
                                  </div>
                                </div>
                                <div class="ms-auto">
                                  <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/></svg>
                                </div>
                              </a>
                            </div>

<div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                              <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/help.html">
                                <div class="grow">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>

</div>
                          
                        </div>
                      </div>
                    </div>

Open related favorites page

Account row, grouped profile links, and a logout action are stacked into one menu panel.

Create a responsive UI block named "Signed-In Account Menu" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ui-components/ecommerce-menus/#signed-in-account-menu. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: ui-components/ecommerce-menus
- Block ID: signed-in-account-menu
- Source description: Account row, grouped profile links, and a logout action are stacked into one menu panel.
- Preview iframe: https://preline.co/blocks/ui-components/ecommerce-menus/iframes/pro/signed-in-account-menu.html (repo path: blocks/ui-components/ecommerce-menus/iframes/pro/signed-in-account-menu.html)
- Source markup reference:
  - partials/pro/storefront/dropdowns/account.html
  - partials/pro/storefront/sources/list-group-with-gray-bg-hover.html

Block-specific fidelity rules:
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Trigger is a `size-9.5` rounded-full button whose content is the user's `size-8` rounded Unsplash avatar photo - not a person icon.
  - Panel is `w-full sm:w-72`; the first row links to the account page and shows the same avatar at `size-10`, the name `James Collins`, and the email `jamescollins@site.so` in xs muted text.
  - Group one has exactly six rows in order: `Personal Info`, `My Orders`, `Order Details`, `Addresses`, `Payment`, `Email Newsletter`.
  - Group two has exactly two rows: `Gift Cards` then `Returns & Refunds`.
  - The last element is a `Logout` button (not a link) that switches to `hover:text-destructive` / `focus:text-destructive`; it is the only row with a destructive state.
  - Three `my-2 mx-2.5 h-px bg-line-2` hairlines separate the account row, group one, group two, and the logout row.
  - There is no `Log in` / `Register` card here - that belongs to the signed-out variant of the same partial; HSDropdown `[--auto-close:inside]` is the only plugin and the preview force-opens the menu on load.

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                      <button id="hs-pro-shadnli" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                      </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-72 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shadnli">
                        <div class="p-2">
                          
                          <a class="py-2 px-2.5 flex items-center gap-3 rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/account.html">
                            <img class="shrink-0 size-10 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                              <span class="block font-medium text-sm text-foreground">
                                James Collins
                              </span>
                              <p class="text-xs text-muted-foreground-1">
                                jamescollins@site.so
                              </p>
                            </div>
                          </a>

<ul class="flex flex-col space-y-0.5">
                            <li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/personal-info.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/><circle cx="12" cy="7" r="4"/></svg>
                                Personal Info
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/my-orders.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                                My Orders
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/order-details.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M8 7v10"/><path d="M12 7v10"/><path d="M17 7v10"/></svg>
                                Order Details
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/addresses.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z"/><path d="M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2"/><path d="M18 22v-3"/><circle cx="10" cy="10" r="3"/></svg>
                                Addresses
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/payment.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                                Payment
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/email-newsletter.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                Email Newsletter
                              </a>
                            </li>
                          </ul>

<ul class="flex flex-col space-y-0.5">
                            <li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/gift-cards.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
                                Gift Cards
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/returns-and-refunds.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                                Returns & Refunds
                              </a>
                            </li>
                          </ul>

<p>
                            <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover hover:text-destructive focus:outline-hidden focus:bg-muted-focus focus:text-destructive">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
                              Logout
                            </button>
                          </p>
                        </div>
                      </div>
                    </div>

Open related storefront homepage

Badge trigger opens a saved-products list with thumbnail rows and a footer link to the full list.

Create a responsive UI block named "Favorites Preview Menu" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ui-components/ecommerce-menus/#favorites-preview-menu. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: ui-components/ecommerce-menus
- Block ID: favorites-preview-menu
- Source description: Badge trigger opens a saved-products list with thumbnail rows and a footer link to the full list.
- Preview iframe: https://preline.co/blocks/ui-components/ecommerce-menus/iframes/pro/favorites-preview-menu.html (repo path: blocks/ui-components/ecommerce-menus/iframes/pro/favorites-preview-menu.html)
- Source markup reference:
  - partials/pro/storefront/dropdowns/favorites.html
  - partials/pro/storefront/sources/mini-product-listing.html

Block-specific fidelity rules:
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Trigger is a `size-9.5` rounded-full heart button with a small secondary-token count badge reading `2`.
  - Panel is `w-full sm:w-96`, edge-to-edge on mobile (`border-y`) and `sm:rounded-xl` with a shadow on desktop; its heading reads `Favorites`.
  - The list sits in a `max-h-120` custom-scrollbar scroll region and holds exactly two rows, each led by a `w-20 h-28 object-cover rounded-lg` Unsplash product photo.
  - Row one is `Everyday Solid Black T-Shirt` priced as a struck-through `$60` followed by a red `$40`; row two is `Nike Air Force 1` at a plain `$139` with no discount.
  - Each row ends with an underlined text button reading `Remove`, wired via `data-hs-remove-element="#<row id>"` to that row's wrapper, which fades out with `hs-removing:opacity-0 duration-300` - Preline's remove-element behavior, not a custom handler.
  - Footer is a centred underlined link reading `View favorites`.
  - The rows carry no quantity selector, colour/size list, checkbox, or per-row favourite toggle - those are optional variants of the shared partial that this block does not enable.

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                      <button id="hs-pro-dnnd" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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 class="flex absolute top-0 inset-e-0 z-10 -mt-1 -me-1">
                          <span class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-secondary text-secondary-foreground rounded-full px-1">
                            2
                            <span class="sr-only">Notifications</span>
                          </span>
                        </span>
                      </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-96 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnnd">
                        <div class="py-4 px-6">
                          <span class="block font-medium text-foreground">
                            Favorites
                          </span>
                        </div>

<div class="grow flex flex-col">
                                <p class="text-sm text-foreground">
                                  Everyday Solid Black T-Shirt
                                </p>
                                <span class="mt-1.5">
                                  <span class="text-sm text-muted-foreground-1">
                                    <s>$60</s>
                                  </span>
                                  <span class="text-sm text-red-500">
                                    $40
                                  </span>
                                </span>

<div class="">
                                  <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shfdi1">
                                    Remove
                                  </button>
                                </div>
                              </div>
                            </div>

<div id="hs-pro-shfdi2" class="hs-removing:opacity-0 duration-300 flex gap-x-5">
                              <div class="relative">
                                <img class="shrink-0 w-20 h-28 object-cover rounded-lg" src="https://images.unsplash.com/photo-1699595749116-33a4a869503c?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                              </div>

<div class="grow flex flex-col">
                                <p class="text-sm text-foreground">
                                  Nike Air Force 1
                                </p>

<div class="">
                                  <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shfdi2">
                                    Remove
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                        </div>

<div class="py-4 px-6 text-center">
                          <a class="inline-flex justify-center items-center font-medium text-sm text-foreground underline underline-offset-4 decoration-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/favorites.html">
                            View favorites
                          </a>
                        </div>
                      </div>
                    </div>

Open related favorites page

Hover dot opens a compact product card over the image while keeping the full look visible underneath.

Create a responsive UI block named "Complete-the-Look Dot Menu" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ui-components/ecommerce-menus/#complete-the-look-dot-menu. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: ui-components/ecommerce-menus
- Block ID: complete-the-look-dot-menu
- Source description: Hover dot opens a compact product card over the image while keeping the full look visible underneath.
- Preview iframe: https://preline.co/blocks/ui-components/ecommerce-menus/iframes/pro/complete-the-look-dot-menu.html (repo path: blocks/ui-components/ecommerce-menus/iframes/pro/complete-the-look-dot-menu.html)
- Source markup reference:
  - partials/pro/storefront/dropdowns/complete-the-look.html

Block-specific fidelity rules:
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - The trigger is a bare dot, not a button with chrome: a `size-4` filled circle behind an `animate-ping` halo, on a `group hover:scale-110 duration-200` button with sr-only text `Look Dot`.
  - The dropdown is hover-driven: `[--trigger:hover]` plus `[--auto-close:inside]`.
  - Panel is `w-52` `rounded-xl` `shadow-lg` with an inner `p-1 bg-layer rounded-xl` frame holding exactly one product row.
  - That row's copy, in order, is `Lightweight Cotton Hooded` (sm foreground), `Men's Clothing` (xs muted), `$45` (sm medium foreground), with a right-aligned Lucide chevron.
  - There is no product thumbnail inside the panel and no lifestyle/look photograph in the source partial - the block is only the dot and its card, so do not invent a background image or an image slot in the card.
  - A `before:-top-2.5 before:inset-s-0 before:w-full before:h-3` bridge keeps the hover path alive between dot and panel; HSDropdown is the only plugin.

<div class="relative">
                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                        
                        <button id="hs-pro-shpdcl1d1" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                          <span class="relative flex">
                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                            <span class="sr-only">Look Dot</span>
                          </span>
                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl1d1">
                          <div class="p-1 bg-layer rounded-xl">
                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                              <div class="grow">
                                <span class="block text-sm text-foreground">
                                  Lightweight Cotton Hooded
                                </span>
                                <p class="mt-1 text-xs text-muted-foreground-1">
                                  Men's Clothing
                                </p>
                                <p class="font-medium text-sm text-foreground">
                                  $45
                                </p>
                              </div>
                              <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/></svg>
                            </a>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related product detail page

Ecommerce Menus

Signed-Out Account Menu Pro

Signed-In Account Menu Pro

Favorites Preview Menu Pro

Complete-the-Look Dot Menu Pro