Tailwind CSS Flow Headers Blocks

Flow Headers

Tailwind CSS flow headers with step timelines, progress indicators, and action areas for checkout and multi-step product flows.

Flow Header with Step Timeline Pro

A step timeline sits between the brand block and a compact action group in one header row.

<div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                            <button id="hs-pro-pnnmd" type="button" class="size-9.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                              <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pnnmd">
                              <div class="p-1">
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <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.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z"/><path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8"/><path d="M15 2v5h5"/></svg>
                                  Statements and reports
                                </a>
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <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="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"/><circle cx="12" cy="12" r="3"/></svg>
                                  Settings
                                </a>
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <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"><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>
                                  Help and Support
                                </a>
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <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>
                                  Sign out
                                </a>
                              </div>
                              <div class="p-1 border-t border-dropdown-divider">
                                <button type="button" class="flex gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dasadam">
                                  <svg class="shrink-0 size-4 mt-0.5" 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="M8 12h8"/><path d="M12 8v8"/></svg>
                                  Open a business account
                                </button>
                              </div>
                            </div>
                            
                          </div>

<div class="relative ps-1.5 ms-0.5 before:absolute before:top-1/2 before:inset-s-0 before:h-4 before:border-s before:border-navbar-divider before:-translate-y-1/2">
                            
                            <div class="hs-tooltip [--placement:auto] inline-block">
                              <button type="button" class="hs-tooltip-toggle size-9.5 flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Cancel
                              </span>
                            </div>
                            
                          </div>
                        </div>

<div class="md:order-2 col-span-full md:col-span-3">
                          
                          <ul class="relative grid grid-cols-4 items-center gap-x-2
                            before:absolute before:bottom-[7px] before:inset-s-[calc(100%/(var(--steps)*2))] before:w-[calc(100%-100%/var(--steps))] before:border-t before:border-navbar-divider
                            after:absolute after:bottom-[7px] after:inset-s-[calc(100%/(var(--steps)*2))] after:w-[calc(200%/(var(--steps)))] after:h-0.5 after:bg-linear-to-r after:from-primary-300 after:to-primary-600 dark:after:from-primary-900 dark:after:to-primary-500" 
                            style="--steps: 4;">
                            
                            <li class="pb-5">
                              <a class="flex flex-col items-center focus:outline-hidden" href="send.html">
                                <span class="absolute bottom-0.5 z-10 flex shrink-0 justify-center items-center size-3 bg-navbar ring-4 ring-navbar text-primary rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </span>
                                <span class="block truncate text-xs text-muted-foreground">
                                  <span class="truncate">Recipient</span>
                                </span>
                              </a>
                            </li>

<li class="pb-5">
                              <a class="flex flex-col items-center focus:outline-hidden" href="send-calculator.html">
                                <span class="absolute bottom-0.5 z-10 flex shrink-0 justify-center items-center size-3 bg-navbar ring-4 ring-navbar text-primary rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </span>
                                <span class="block truncate text-xs text-muted-foreground">
                                  <span class="truncate">Amount</span>
                                </span>
                              </a>
                            </li>

<li class="pb-5">
                              <a class="flex flex-col items-center focus:outline-hidden" href="send-review.html">
                                <span class="absolute bottom-0.5 z-10 flex shrink-0 justify-center items-center size-3 bg-primary ring-4 ring-navbar text-primary-foreground rounded-full"></span>
                                <span class="block truncate font-semibold text-sm text-primary">
                                  <span class="truncate">Review</span>
                                </span>
                              </a>
                            </li>

<li class="pb-5">
                              <a class="flex flex-col items-center focus:outline-hidden" href="send-pay.html">
                                <span class="absolute bottom-0.5 z-10 flex shrink-0 justify-center items-center size-3 bg-navbar border border-layer-line ring-4 ring-navbar rounded-full"></span>
                                <span class="block truncate text-xs text-muted-foreground">
                                  <span class="truncate">Pay</span>
                                </span>
                              </a>
                            </li>
                            
                          </ul>
                          
                        </div>
                      </div>
                    </header>

Create a navigation header component named "Flow Header with Step Timeline" that visually and behaviorally matches the reference design. Use the current project's existing framework, styling conventions, tokens, components, icon system, dropdown primitives, tooltip primitives, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/navigation-layout/flow-headers/#flow-header-with-step-timeline. 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.

Baseline fidelity gates:
- Preserve exact visible copy, data values, order, hierarchy, and default state unless the user explicitly asks to change them.
- Map semantic token roles to one coherent destination token vocabulary. Every source primary role must use the destination project's primary token/config, never Preline blue or fixed blue palette values unless the destination primary is explicitly blue.
- Verify every emitted utility or component class exists in the destination. Map or define a missing semantic token before use; do not leave any undefined source class in generated markup.
- Use exact source assets, image URLs, inline SVGs, avatars, logos, and brand marks when supplied; do not replace them with placeholders, initials, emojis, generic icons, or alternate stock media.
- Final QA: compare the implementation with the exact anchored Preview and HTML source at mobile and desktop widths, including open/alternate states, assets, layering, focus behavior, and dark mode.

Behavior runtime rule:
- 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.

This is not a generic navbar, checkout progress card, wizard page, dashboard header, marketing header, or full payments dashboard. The source block is a single compact flow header row from the payments dashboard, with the Preline brand on the left, a centered four-step horizontal timeline, and a compact account/cancel action group on the right.

Build only the source-included flow header. Do not append the payment review page content, dashboard sidebars, cards, forms, analytics widgets, footer, marketing sections, or unrelated page chrome around it.

Source structure:
- Primary source partial: `partials/pro/payments-dashboard/navbars/main.html`.
- Step timeline source: `partials/pro/payments-dashboard/layouts-components/timeline-horizontal.html`.
- Logo source: `partials/pro/payments-dashboard/navbars/logo.html`.
- Account dropdown source: `partials/pro/payments-dashboard/dropdowns/account.html`.
- Preview iframe source: `blocks/navigation-layout/flow-headers/iframes/pro/flow-header-with-step-timeline.html`.
- Related template context: `templates/payments/payments-dashboard/send-review.html`, linked from the block as `Open related payments dashboard template`. Use it only for shared payments-header fidelity. Do not recreate the template's main review form in this block.
- If the destination project can import these partials, use them. If it cannot, recreate their visible structure and behavior faithfully from the source.

Overall header:
- Header element uses the source role surface: `bg-navbar`, bottom border from the block config, and compact vertical padding.
- Source custom class for this block is `md:py-1 border-b border-line-2`; preserve the slimmer desktop header feel.
- The source header wrapper uses `max-w-4xl mx-auto`, `basis-full w-full`, `py-2.5 px-5 md:px-8 2xl:px-5` in the Preline payments dashboard demo. Treat this as the source demo shell, not an automatic destination width.
- When adapting into an existing project, inspect and reuse the destination project's established header/container width and horizontal padding, such as its existing `container`, `max-w-*`, `mx-auto`, `px-*`, or app-shell wrapper convention. Do not force `max-w-4xl` if the project's header uses a different width.
- Preserve the source internal relationship inside that destination container: logo on the left, four-step timeline centered, and account/cancel actions on the right.
- With the step timeline enabled, the inner layout is a responsive grid: `grid grid-cols-2 md:grid-cols-5 items-center gap-y-2 md:gap-y-0`.
- Mobile layout: logo sits in the left column, account/cancel actions in the right column, and the step timeline spans the full row below.
- Desktop layout: logo is order 1 and occupies one column, timeline is order 2 and spans the middle three columns, actions are order 3 and occupy the right column.
- Do not wrap the header in a card, containerized page section, hero, or standalone progress panel. It is a navigation header, not a page body component.

Left brand:
- Use the source Preline logo SVG from `partials/pro/payments-dashboard/navbars/logo.html`, sized around `w-28 h-auto`.
- The logo is a link with rounded focus treatment and `aria-label="Preline"`.
- Preserve the source Preline logo shape and wordmark, but color it with the destination project's primary/brand token. Do not hardcode the original Preline blue unless the destination project's configured primary color is actually blue.
- In plain Tailwind projects, the logo paths should inherit from the same primary token used by primary buttons, active states, and focus rings. Do not use `text-blue-*`, `fill-blue-*`, `stroke-blue-*`, `#2563eb`, or other fixed Preline-blue values for the logo.
- The block config sets `sidebarToggle` to `false`, so there is no sidebar toggle button beside the logo in this block.

Centered step timeline:
- Use the source horizontal timeline structure from `partials/pro/payments-dashboard/layouts-components/timeline-horizontal.html`.
- It is a `ul` grid with four equal columns and a CSS custom property equivalent to `--steps: 4`.
- The baseline is a thin horizontal divider positioned near the bottom of the labels, not a large progress bar above the text.
- The completed progress is a subtle primary gradient line from the first completed segment through the active `Review` step. Preserve the source gradient treatment rather than making a chunky segmented pill.
- Each step is a link with a label above a small bottom indicator.
- The label layer and indicator layer are separate. The labels sit above; the connector baseline and progress line sit below the labels; each dot/check is centered on that connector line.
- All indicators share the same vertical y-coordinate. The checked indicators, active dot, unchecked dot, connector baseline, and completed progress line must align so the line visually passes through the center of every dot/check.
- Position each indicator from the step column/grid cell or shared timeline layer, not from the label text width or label baseline. Do not render the dot/check as an inline icon next to the label, and do not absolutely position it relative to a label-only anchor that makes it float beside or over the text.
- The step items are exactly:
  - `Recipient`, href `send.html`, muted text, checked indicator.
  - `Amount`, href `send-calculator.html`, muted text, checked indicator.
  - `Review`, href `send-review.html`, active state, `font-semibold text-sm text-primary`, active primary dot indicator.
  - `Pay`, href `send-pay.html`, muted text, unchecked bordered indicator.
- Checked indicators are tiny `size-3` circles with source navbar background, ring around the navbar surface, and a check icon with `stroke-width="3"`.
- Active indicator is a tiny `size-3` primary circle with a navbar-surface ring.
- Unchecked indicator is a tiny `size-3` circle with navbar background, layer border, and navbar-surface ring.
- Preserve the compact spacing: each `li` has bottom padding for the indicator, labels are centered and truncated, and the timeline remains a slim header element.
- Keep the source vertical relationship from `timeline-horizontal.html`: a bottom-padded step item, the label above the bottom padding, and the indicator anchored near the bottom of the timeline so it sits on the line. If reimplementing with pseudo-elements, use the same relationship: label block first, line/dot layer below, all columns aligned.
- Do not convert the timeline into numbered badges, large circular steps, vertical steps, breadcrumbs, tabs, or a progress bar with labels underneath.

Primary color adaptation is critical:
- Treat every source `primary` color as a semantic role, not as Preline's default blue.
- The active `Review` label, active dot, checked-step checkmarks, completed progress gradient, logo fill/stroke, focus rings, and any primary hover/focus states must use the destination project's current primary color.
- In shadcn-style projects, use `text-primary`, `bg-primary`, `ring-background`, `from-primary/25`, `via-primary/70`, and `to-primary` or equivalent token utilities.
- In plain Tailwind projects, first reuse existing semantic primary utilities from the project if they exist, such as `text-primary`, `bg-primary`, `border-primary`, `from-primary`, or configured theme colors. If the project exposes CSS variables for primary color, use those variables consistently through semantic utilities or a small local token mapping.
- If the destination Tailwind project uses a non-blue primary, such as black, emerald, teal, violet, rose, or amber, the step line and active/check indicators must visibly use that color family. They must not stay blue.
- Do not emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or hardcoded blue hex/rgb values for primary roles unless the destination primary color is explicitly blue.
- Do not make completed steps blue while the active step is another color. Completed, active, and logo primary treatments must share the same destination primary role.

Right action group:
- Right action group is a compact flex row with gap around `gap-x-1.5`.
- This block config sets `notifications` to `false` and `darkMode` to `false`, so do not add notification or theme-toggle buttons.
- Include the account dropdown trigger before the cancel action.
- Account trigger is a `size-9.5` square rounded-lg button containing a `size-9.5 rounded-md` avatar image.
- Use this exact account avatar URL:
  `https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
- Do not replace the avatar with initials, a generated face, a generic user icon, or a different photo.
- Include a vertical divider before the cancel button using the source `relative ps-1.5 ms-0.5 before:absolute before:top-1/2 before:inset-s-0 before:h-4 before:border-s before:border-navbar-divider before:-translate-y-1/2` treatment or the destination equivalent.
- Cancel action is a `size-9.5` rounded-lg icon button with an X icon. It has a tooltip reading `Cancel`.
- Do not turn Cancel into a visible text button, destructive button, or browser close control.

Account dropdown:
- Account dropdown is positioned bottom-right and closed by default.
- Dropdown panel is about `w-60`, uses semantic dropdown surface, dropdown border, rounded-xl corners, and a strong shadow.
- Menu rows are compact `py-2 px-3`, `text-sm`, `rounded-lg`, and include a leading Lucide-style outline icon.
- Menu rows, in exact order:
  - `Statements and reports`.
  - `Settings`.
  - `Help and Support`.
  - `Sign out`.
- After a divider, include a button row:
  - `Open a business account`.
- The `Open a business account` row is a trigger for `#hs-pro-dasadam` in the source. If the destination page does not include that modal, keep the menu row and trigger semantics without inventing a new unrelated modal.
- Do not replace this account menu with a profile card, settings panel, account switcher, or generic list of account links.

Icon rules:
- Ordinary interface icons use Lucide-style outline SVGs: 24 viewBox, `fill="none"`, `stroke="currentColor"`, `stroke-width="2"`, rounded line caps and joins.
- The step check icon uses the source stronger `stroke-width="3"`.
- The Preline logo is a brand SVG and should keep its source shape, but its fill/stroke color roles still map to the destination primary token.
- Do not substitute Bootstrap Icons, Material filled icons, Font Awesome filled icons, emojis, or random icon glyphs for ordinary controls unless the destination icon system already matches the same outline style.

Tailwind and token mapping:
- Keep the implementation Tailwind-first in Tailwind projects. Use utility classes directly in markup and reuse existing project component classes only when they already exist.
- Source token classes such as `bg-navbar`, `border-line-2`, `border-navbar-divider`, `ring-navbar`, `text-foreground`, `text-muted-foreground`, `text-primary`, `bg-primary`, `text-primary-foreground`, `fill-primary`, `stroke-primary`, `bg-muted-hover`, `bg-muted-focus`, `bg-dropdown`, `border-dropdown-line`, `border-dropdown-divider`, `text-dropdown-item-foreground`, `bg-dropdown-item-hover`, `bg-dropdown-item-focus`, `bg-tooltip`, `border-tooltip-line`, `text-tooltip-foreground`, `bg-layer`, and `border-layer-line` describe roles. Map them to the destination project's actual token vocabulary.
- Do not copy Preline-only token names unless those exact classes already exist in the destination project.
- Use one token vocabulary consistently. In shadcn-style projects, use native tokens such as `bg-background`, `bg-card`, `bg-popover`, `border-border`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `text-primary`, `text-primary-foreground`, `bg-accent`, and `ring-ring` when available.
- In Bootstrap projects, use native component structure and variables such as `.navbar`, `.dropdown-menu`, `.dropdown-item`, `.btn`, `.btn-primary`, `.text-body`, `.text-muted`, `.border`, `--bs-primary`, and `--bs-primary-rgb`, while preserving the custom step timeline geometry.
- Do not mix Preline token names, shadcn token names, Bootstrap classes, raw Tailwind palette colors, inline styles, and newly invented token classes in the same component.
- The avatar URL is fixed source content. The Preline logo shape is fixed source content, but its primary-colored fill/stroke must still adapt to the destination primary token.

Behavior and interactions:
- Step labels are real links with the source hrefs. They should be keyboard focusable.
- Account trigger toggles the dropdown and keeps `aria-expanded` in sync.
- Account dropdown can be navigated by keyboard and closes according to the destination dropdown primitive.
- Cancel button has a hover/focus state and tooltip. It does not need to submit or navigate unless the destination product supplies a flow-cancel action.
- Tooltip should be available to pointer and keyboard focus where the destination system supports it.
- Use the destination project's dropdown and tooltip primitives only when they preserve the source trigger geometry, placement, open/close behavior, focus handling, and keyboard access. If no faithful equivalent exists, install/use Preline `HSDropdown` and `HSTooltip`; use scoped custom behavior only under the explicit dependency-prohibition fallback above.
- Do not force the account dropdown open in the default preview state.

Responsive behavior:
- At mobile widths, the timeline spans the full header row below logo/actions and remains readable without wrapping each step onto its own line.
- At desktop widths, keep the three-zone layout: logo left, timeline centered, account/cancel right.
- Step labels can truncate but must remain visible enough to identify `Recipient`, `Amount`, `Review`, and `Pay`.
- Header controls should keep stable square dimensions so hover/focus states do not shift layout.
- The header should not become a hamburger navigation menu unless the surrounding product explicitly supplies one.

Accessibility:
- Header uses semantic `header`.
- Logo link has `aria-label="Preline"`.
- Account trigger has `aria-haspopup="menu"`, `aria-expanded`, and an accessible label.
- Account dropdown rows are semantic links or buttons.
- Cancel icon button has an accessible name and tooltip text `Cancel`.
- Decorative icons can be `aria-hidden="true"` when adjacent text names the control.
- Step links expose their current state using `aria-current="step"` or an equivalent accessible pattern for the active `Review` step when the destination supports it.

Final QA checklist:
- The result is a single flow header, not the full send-review page.
- Header has Preline logo at left, centered four-step timeline, account dropdown trigger, and cancel tooltip button at right.
- Source block settings are preserved: no sidebar toggle, no notifications button, no dark-mode button.
- Timeline has exactly four steps: `Recipient`, `Amount`, `Review`, `Pay`.
- `Recipient` and `Amount` show checked indicators; `Review` is active with primary text and active dot; `Pay` is unchecked with a bordered dot.
- The timeline baseline and primary gradient progress line sit near the bottom of the step labels, matching the source.
- Step dots/checks are not misplaced beside the labels: every indicator is centered in its column on the connector line, with the line passing through the dot/check centers.
- In Tailwind outputs, the logo, active step, checked-step icons, active dot, and progress gradient use the destination primary color, not hardcoded Preline blue, unless the destination primary is blue.
- Account avatar uses the exact source Unsplash URL and square rounded-md treatment.
- Account dropdown contains `Statements and reports`, `Settings`, `Help and Support`, `Sign out`, divider, and `Open a business account`.
- Cancel control is icon-only, separated by a vertical divider, and has tooltip text `Cancel`.
- The header keeps the source compact density and responsive grid behavior.
- Brand logo, avatar, source text, step hrefs, icon style, token roles, hover/focus states, and dropdown/tooltip interactions are preserved.
- No unrelated page content, sidebars, cards, modals, footer, marketing copy, generic progress wizard, or extra navigation items are introduced.