Tailwind CSS Floating Headers Blocks

All Blocks
Marketing
Floating Headers

Floating Headers

Tailwind CSS floating header blocks with rounded nav bars, top-of-page shells, and CTA-ready public-site navigation.

Floating Website Header Free

The header is lifted off the page surface, with navigation and actions contained in one floating bar.

Create a responsive UI block named "Floating Website Header" 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/marketing/floating-headers/#floating-website-header. 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: marketing/floating-headers
- Block ID: floating-website-header
- Source description: The header is lifted off the page surface, with navigation and actions contained in one floating bar.
- Preview iframe: https://preline.co/blocks/marketing/floating-headers/iframes/free/floating-website-header.html (repo path: blocks/marketing/floating-headers/iframes/free/floating-website-header.html)
- Source markup reference:
  - partials/blocks/sources/pages/header-classic.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:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Floating variant: `sticky top-4` header whose rounded bar is drawn by paired pseudo-elements (`before:` for the `rounded-4xl` border, `after:` for the `-z-1 rounded-4xl bg-navbar` fill), both `max-w-5xl mx-2 lg:mx-auto`; the nav is `max-w-5xl ps-5 pe-2 mx-2 lg:mx-auto py-2`.
  - Brand is a plain text wordmark reading `Brand` (`font-semibold text-xl`, `aria-label="Brand"`) - not an SVG logo.
  - Top-level items in order: `Landing`, `Account`, `Work`, `Blog`, a `Dropdown` trigger, then a divided button group holding `Log in`.
  - `Landing` is the active item on first load: it carries `aria-current="page"` and primary text color; the rest use the muted navbar link color.
  - Each top-level link has a leading `size-4` icon that is visible only below `md` (`block md:hidden`); the `Log in` link's person icon stays visible at all sizes.
  - The `Dropdown` menu contains `About`, a nested `Sub Menu` trigger, `Downloads`, and `Team Account`; the nested submenu repeats `About`, `Downloads`, `Team Account`.
  - Behavior is Preline HSCollapse plus HSDropdown: `#hs-header-classic` is `hidden` by default with a `size-9` `rounded-full` toggle below `md`; both dropdowns start closed and are configured `[--strategy:static] md:[--strategy:fixed]` (outer) and `md:[--trigger:hover]` with `md:-rotate-90` chevron (nested), so mobile expands inline and desktop floats.

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.

<header class="sticky top-4 inset-x-0 before:absolute before:inset-0 before:max-w-5xl before:mx-2 lg:before:mx-auto before:rounded-4xl before:border before:border-navbar-line after:absolute after:inset-0 after:-z-1 after:max-w-5xl after:mx-2 lg:after:mx-auto after:rounded-4xl after:bg-navbar flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full">
                    <nav class="relative max-w-5xl w-full md:flex md:items-center md:justify-between md:gap-3 ps-5 pe-2 mx-2 lg:mx-auto py-2">
                      
                      <div class="flex items-center justify-between">
                        <a class="flex-none font-semibold text-xl text-foreground focus:outline-hidden focus:opacity-80" href="#" aria-label="Brand">Brand</a>
      
                        
                        <div class="md:hidden">
                          <button type="button" class="hs-collapse-toggle relative size-9 flex justify-center items-center text-sm font-semibold rounded-full bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" id="hs-header-classic-collapse" aria-expanded="false" aria-controls="hs-header-classic" aria-label="Toggle navigation" data-hs-collapse="#hs-header-classic">
                            <svg class="hs-collapse-open:hidden 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"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
                            <svg class="hs-collapse-open:block shrink-0 hidden 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>
                            <span class="sr-only">Toggle navigation</span>
                          </button>
                        </div>
                        
                      </div>

<div id="hs-header-classic" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block" aria-labelledby="hs-header-classic-collapse" role="region">
                        <div class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="py-2 md:py-0 flex flex-col md:flex-row md:items-center md:justify-end gap-0.5 md:gap-1">
                            <a class="p-2 flex items-center text-sm text-primary focus:outline-hidden" href="#" aria-current="page">
                              <svg class="shrink-0 size-4 me-3 md:me-2 block md:hidden" 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 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
                              Landing
                            </a>
          
                            <a class="p-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                              <svg class="shrink-0 size-4 me-3 md:me-2 block md:hidden" 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>
                              Account
                            </a>
          
                            <a class="p-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                              <svg class="shrink-0 size-4 me-3 md:me-2 block md:hidden" 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 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>
                              Work
                            </a>
          
                            <a class="p-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                              <svg class="shrink-0 size-4 me-3 md:me-2 block md:hidden" 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="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><path d="M18 14h-8"/><path d="M15 18h-5"/><path d="M10 6h8v4h-8V6Z"/></svg>
                              Blog
                            </a>
          
                            
                            <div class="hs-dropdown [--strategy:static] md:[--strategy:fixed] [--adaptive:none] md:[--adaptive:adaptive] [--is-collapse:true] md:[--is-collapse:false] ">
                              <button id="hs-header-classic-dropdown" type="button" class="hs-dropdown-toggle w-full p-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                <svg class="shrink-0 size-4 me-3 md:me-2 block md:hidden" 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 10 2.5-2.5L3 5"/><path d="m3 19 2.5-2.5L3 14"/><path d="M10 6h11"/><path d="M10 12h11"/><path d="M10 18h11"/></svg>
                                Dropdown
                                <svg class="hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 shrink-0 size-4 ms-auto md:ms-1" 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 9 6 6 6-6"/></svg>
                              </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 relative w-full md:w-52 hidden z-10 top-full ps-7 md:ps-0 md:bg-dropdown md:border md:border-dropdown-line md:rounded-lg md:shadow-md before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5 md:after:hidden after:absolute after:top-1 after:inset-s-4.5 after:h-[calc(100%-4px)] after:border-s after:border-navbar-nav-list-divider" role="menu" aria-orientation="vertical" aria-labelledby="hs-header-classic-dropdown">
                                <div class="py-1 md:px-1 space-y-0.5">
                                  <a class="py-1.5 px-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                                    About
                                  </a>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 relative md:w-48 hidden z-10 md:mt-2 md:mx-2.5! md:top-0 md:inset-e-full ps-7 md:ps-0 md:bg-dropdown md:border md:border-dropdown-line md:rounded-lg md:shadow-md before:hidden md:before:block before:absolute before:-inset-e-5 before:top-0 before:h-full before:w-5 md:after:hidden after:absolute after:top-1 after:inset-s-4.5 after:h-[calc(100%-4px)] after:border-s after:border-navbar-nav-list-divider" role="menu" aria-orientation="vertical" aria-labelledby="hs-header-classic-dropdown-sub">
                                      <div class="p-1 space-y-0.5 md:space-y-1">
                                        <a class="py-1.5 px-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                                          About
                                        </a>

<a class="py-1.5 px-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                                    Downloads
                                  </a>
                
                                  <a class="py-1.5 px-2 flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                                    Team Account
                                  </a>
                                </div>
                              </div>
                            </div>
                            
          
                            
                            <div class="relative flex flex-wrap items-center gap-x-1.5 md:ps-2.5  md:ms-1.5 before:block before:absolute before:top-1/2 before:-inset-s-px before:w-px before:h-4 before:bg-navbar-divider before:-translate-y-1/2">
                              <a class="p-2 w-full flex items-center text-sm text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                                <svg class="shrink-0 size-4 me-3 md:me-2" 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>
                                Log in
                              </a>
                            </div>
                            
                          </div>
                        </div>
                      </div>
                      
                    </nav>
                  </header>

Two floating capsules split brand-plus-nav from sign-in and the CTA, with a hover mega menu and a compact mobile bar.

Create a responsive UI block named "Split Pill Navbar" 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/marketing/floating-headers/#split-pill-navbar. 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: marketing/floating-headers
- Block ID: split-pill-navbar
- Source description: Two floating capsules split brand-plus-nav from sign-in and the CTA, with a hover mega menu and a compact mobile bar.
- Preview iframe: https://preline.co/blocks/marketing/floating-headers/iframes/pro/split-pill-navbar.html (repo path: blocks/marketing/floating-headers/iframes/pro/split-pill-navbar.html)
- Source markup reference:
  - partials/blocks/sources/pages/header-split-pill-navbar.html
  - partials/pro/logos/logo-short.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- The catalogue iframe stages the header on a vertical primary-token gradient. That stage is preview scaffolding, not part of the copied header markup. Do not emit those gradient layers unless building a full-page demo.
- Source content inventory (from the source markup):
  - Sticky `top-4 inset-x-0 z-50` header. Inner row is `max-w-360 mx-auto px-4 flex items-center justify-between gap-3`.
  - Two separate `rounded-full bg-navbar border-navbar-line shadow-sm` capsules, not one combined bar.
  - Left capsule (`py-1.5 ps-3 pe-1.5`, `gap-x-2`): Preline short SVG mark (`logo-short`, `aria-label="Preline"`), then desktop-only (`hidden md:flex`) Resources mega, Company dropdown, and Stories link.
  - Right capsule (`hidden md:flex`, same padding): text-only `Sign in`, then `Get started` with a trailing arrow-right icon. No log-in icon on Sign in.
  - Mobile does not add a second bar and does not stretch `w-full`. The left capsule hugs its contents and holds the logo, a `size-9` collapse toggle (`#hs-split-pill-collapse`), and Get started with the same arrow.
  - Resources mega (`#hs-split-pill-resources`): two `bg-layer` columns — Build (Websites / Mobile apps / Pages) and Resources (Documentation / Support) — plus a Sessions 2025 keynote row and Changelog footer. Menu width `md:w-150`. Desktop chevrons do not rotate.
  - Company (`#hs-split-pill-company`): About, Services, Careers, Careers: Job Details, Careers: Apply. Desktop chevrons do not rotate.
  - Stories is a plain link, not a dropdown.
  - Hover menus: `relative` on `.hs-dropdown`, `md:[--strategy:absolute] md:[--trigger:hover] [--offset:0] [--adaptive:none]`. Menu is `top-full` with no overlay/`::before` hover bridge and no `overflow-hidden` on `.hs-dropdown-menu` (those block clicks or clip the hover gap).
  - Mobile collapse `#hs-split-pill-nav` (`md:hidden`): Resources and Company are `[--strategy:static] [--is-collapse:true]` accordions (`#hs-split-pill-resources-mobile`, `#hs-split-pill-company-mobile`) whose chevrons do rotate (`hs-dropdown-open:-rotate-180`). Stories and Sign in stay links. Get started stays in the pill, not in the collapse.

<header class="sticky top-4 inset-x-0 z-50 w-full">
  <div class="relative max-w-360 mx-auto px-4 flex items-center justify-between gap-3">
    
    <nav class="relative flex items-center gap-x-2 py-1.5 ps-3 pe-1.5 bg-navbar border border-navbar-line rounded-full shadow-sm">
      <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
      	<svg class="w-[31px] h-auto" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
      		<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0835 3.23358C9.88316 3.23358 3.23548 9.8771 3.23548 18.0723V35.5832H0.583496V18.0723C0.583496 8.41337 8.41851 0.583252 18.0835 0.583252C27.7485 0.583252 35.5835 8.41337 35.5835 18.0723C35.5835 27.7312 27.7485 35.5614 18.0835 35.5614H16.7357V32.911H18.0835C26.2838 32.911 32.9315 26.2675 32.9315 18.0723C32.9315 9.8771 26.2838 3.23358 18.0835 3.23358Z" class="fill-primary" fill="currentColor"/>
      		<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0833 8.62162C12.8852 8.62162 8.62666 12.9245 8.62666 18.2879V35.5833H5.97468V18.2879C5.97468 11.5105 11.3713 5.97129 18.0833 5.97129C24.7954 5.97129 30.192 11.5105 30.192 18.2879C30.192 25.0653 24.7954 30.6045 18.0833 30.6045H16.7355V27.9542H18.0833C23.2815 27.9542 27.54 23.6513 27.54 18.2879C27.54 12.9245 23.2815 8.62162 18.0833 8.62162Z" class="fill-primary" fill="currentColor"/>
      		<path d="M24.8225 18.1012C24.8225 21.8208 21.8053 24.8361 18.0833 24.8361C14.3614 24.8361 11.3442 21.8208 11.3442 18.1012C11.3442 14.3815 14.3614 11.3662 18.0833 11.3662C21.8053 11.3662 24.8225 14.3815 24.8225 18.1012Z" class="fill-primary" fill="currentColor"/>
      	</svg>
      </a>

<div class="hidden md:flex items-center gap-x-0.5">
        
        <div class="hs-dropdown relative [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:[--offset:0] md:inline-block">
          <button id="hs-split-pill-resources" type="button" class="hs-dropdown-toggle py-1.5 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-full text-navbar-2-nav-foreground hover:bg-navbar-nav-hover hs-dropdown-open:bg-navbar-nav-active focus:outline-hidden focus:bg-navbar-nav-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Mega Menu">
            Resources
            <svg class="shrink-0 size-3.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"><path d="m6 9 6 6 6-6"/></svg>
          </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 relative w-full md:w-150 hidden z-10 top-full start-0 mt-2 md:mt-0" role="menu" aria-orientation="vertical" aria-labelledby="hs-split-pill-resources">
            <div class="rounded-2xl bg-dropdown border border-dropdown-line md:shadow-xl overflow-hidden">
            <div class="flex flex-col gap-y-1 p-1">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-1">
                <div class="p-5 md:min-h-50 flex flex-col justify-between bg-layer rounded-xl md:rounded-e-none md:rounded-ss-xl">
                  <div class="mb-5">
                    <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                      Build
                      <span class="ms-auto size-6 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-sm">
                        <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                      </span>
                    </a>
                  </div>
                  <ul class="flex flex-col">
                    <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                      <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                        <span class="size-1 bg-primary rounded-full"></span>
                        Websites
                        <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                        </span>
                      </a>
                    </li>
                    <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                      <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                        <span class="size-1 bg-primary rounded-full"></span>
                        Mobile apps
                        <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                        </span>
                      </a>
                    </li>
                    <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                      <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                        <span class="size-1 bg-primary rounded-full"></span>
                        Pages
                        <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                        </span>
                      </a>
                    </li>
                  </ul>
                </div>

<div class="p-5 md:min-h-50 flex flex-col justify-between bg-layer rounded-xl md:rounded-s-none md:rounded-se-xl">
                  <div class="mb-5">
                    <a class="group flex items-center gap-x-3 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                      Resources
                      <span class="ms-auto size-6 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-sm">
                        <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                      </span>
                    </a>
                  </div>
                  <ul class="flex flex-col">
                    <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                      <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                        <span class="size-1 bg-primary rounded-full"></span>
                        Documentation
                        <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                        </span>
                      </a>
                    </li>
                    <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                      <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                        <span class="size-1 bg-primary rounded-full"></span>
                        Support
                        <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                        </span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>

<div class="p-2 bg-layer rounded-xl">
                <div class="flex flex-wrap justify-between items-center gap-1">
                  <a class="py-1.5 ps-3 pe-2 group flex items-center gap-x-1 font-medium text-sm text-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                    Sessions 2025 ‐ Watch the product keynote live
                    <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                  </a>
                  <a class="py-1.5 px-3 font-medium text-sm text-primary rounded-full hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
                    Changelog
                  </a>
                </div>
              </div>
            </div>
            </div>
          </div>
        </div>

<div class="hs-dropdown relative [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:[--offset:0] md:inline-block">
          <button id="hs-split-pill-company" type="button" class="hs-dropdown-toggle py-1.5 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-full text-navbar-2-nav-foreground hover:bg-navbar-nav-hover hs-dropdown-open:bg-navbar-nav-active focus:outline-hidden focus:bg-navbar-nav-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
            Company
            <svg class="shrink-0 size-3.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"><path d="m6 9 6 6 6-6"/></svg>
          </button>
          <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 relative w-full md:w-50 hidden z-10 top-full mt-2 md:mt-0" role="menu" aria-orientation="vertical" aria-labelledby="hs-split-pill-company">
            <div class="p-5 flex flex-col gap-y-3 rounded-2xl bg-dropdown border border-dropdown-line md:shadow-xl">
              <a class="text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">About</a>
              <a class="text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Services</a>
              <a class="text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Careers</a>
              <a class="text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Careers: Job Details</a>
              <a class="text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Careers: Apply</a>
            </div>
          </div>
        </div>

<a class="py-1.5 px-3 inline-flex items-center text-sm font-medium rounded-full text-navbar-2-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" href="#">Stories</a>
      </div>

<div class="flex items-center gap-x-2 md:hidden">
        <button type="button" class="hs-collapse-toggle size-8 flex justify-center items-center text-sm font-semibold rounded-full bg-layer border border-layer-line text-layer-foreground disabled:opacity-50 disabled:pointer-events-none" id="hs-split-pill-collapse" aria-expanded="false" aria-controls="hs-split-pill-nav" aria-label="Toggle navigation" data-hs-collapse="#hs-split-pill-nav">
          <svg class="hs-collapse-open:hidden 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"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
          <svg class="hs-collapse-open:block hidden 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>
        <a class="py-1.5 px-4 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover" href="#">
        Get started
        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
      </a>
      </div>
    </nav>

<nav class="hidden md:flex items-center gap-x-1 py-1.5 ps-3 pe-1.5 bg-navbar border border-navbar-line rounded-full shadow-sm">
      <a class="py-1.5 px-3 inline-flex items-center text-sm font-medium rounded-full text-navbar-2-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" href="#">Sign in</a>
      <a class="py-1.5 px-4 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover" href="#">
        Get started
        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
      </a>
    </nav>
    
  </div>

<div id="hs-split-pill-nav" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:hidden" aria-labelledby="hs-split-pill-collapse" role="region">
    <div class="mx-4 mt-2 p-3 rounded-2xl bg-navbar border border-navbar-line">
      <div class="flex flex-col gap-y-1">
        <div class="hs-dropdown [--strategy:static] [--adaptive:none] [--is-collapse:true] relative w-full">
          <button id="hs-split-pill-resources-mobile" type="button" class="hs-dropdown-toggle w-full p-2 flex items-center text-sm font-medium rounded-lg text-navbar-2-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Mega Menu">
            Resources
            <svg class="hs-dropdown-open:-rotate-180 duration-300 shrink-0 size-4 ms-auto" 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 9 6 6 6-6"/></svg>
          </button>
          <div class="hs-dropdown-menu transition-[opacity,margin] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full hidden" role="menu" aria-orientation="vertical" aria-labelledby="hs-split-pill-resources-mobile">
            <div class="flex flex-col gap-y-1 ps-2">
              <div class="p-3 flex flex-col bg-layer rounded-xl">
                <a class="group flex items-center gap-x-2 py-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                  Build
                  <span class="ms-auto size-6 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-sm">
                    <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="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                  </span>
                </a>
                <a class="group flex items-center gap-x-2 py-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden border-t border-line-1" href="#">
                  <span class="size-1 bg-primary rounded-full"></span>
                  Websites
                </a>
                <a class="group flex items-center gap-x-2 py-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden border-t border-line-1" href="#">
                  <span class="size-1 bg-primary rounded-full"></span>
                  Mobile apps
                </a>
                <a class="group flex items-center gap-x-2 py-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden border-t border-line-1" href="#">
                  <span class="size-1 bg-primary rounded-full"></span>
                  Pages
                </a>
              </div>
              <div class="p-3 flex flex-col bg-layer rounded-xl">
                <a class="group flex items-center gap-x-2 py-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                  Resources
                  <span class="ms-auto size-6 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-sm">
                    <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="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                  </span>
                </a>
                <a class="group flex items-center gap-x-2 py-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden border-t border-line-1" href="#">
                  <span class="size-1 bg-primary rounded-full"></span>
                  Documentation
                </a>
                <a class="group flex items-center gap-x-2 py-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden border-t border-line-1" href="#">
                  <span class="size-1 bg-primary rounded-full"></span>
                  Support
                </a>
              </div>
              <a class="p-3 flex items-center gap-x-1 font-medium text-sm text-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                Sessions 2025 ‐ Watch the product keynote live
              </a>
              <a class="px-3 pb-3 font-medium text-sm text-primary" href="#">Changelog</a>
            </div>
          </div>
        </div>

<div class="hs-dropdown [--strategy:static] [--adaptive:none] [--is-collapse:true] relative w-full">
          <button id="hs-split-pill-company-mobile" type="button" class="hs-dropdown-toggle w-full p-2 flex items-center text-sm font-medium rounded-lg text-navbar-2-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
            Company
            <svg class="hs-dropdown-open:-rotate-180 duration-300 shrink-0 size-4 ms-auto" 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 9 6 6 6-6"/></svg>
          </button>
          <div class="hs-dropdown-menu transition-[opacity,margin] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full hidden" role="menu" aria-orientation="vertical" aria-labelledby="hs-split-pill-company-mobile">
            <div class="ps-4 pe-2 pb-2 flex flex-col gap-y-2">
              <a class="py-1 text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">About</a>
              <a class="py-1 text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Services</a>
              <a class="py-1 text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Careers</a>
              <a class="py-1 text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Careers: Job Details</a>
              <a class="py-1 text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Careers: Apply</a>
            </div>
          </div>
        </div>

<a class="p-2 text-sm font-medium rounded-lg text-navbar-2-nav-foreground hover:bg-navbar-nav-hover" href="#">Stories</a>
        <a class="p-2 text-sm font-medium rounded-lg text-navbar-2-nav-foreground hover:bg-navbar-nav-hover" href="#">Sign in</a>
      </div>
    </div>
  </div>
  
</header>

A short navbar bar floats off the page surface, with brand, links, and actions contained in one strip.

Create a responsive UI block named "Minimal Floating Navbar" 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/marketing/floating-headers/#minimal-floating-navbar. 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: marketing/floating-headers
- Block ID: minimal-floating-navbar
- Source description: A short navbar bar floats off the page surface, with brand, links, and actions contained in one strip.
- Preview iframe: https://preline.co/blocks/marketing/floating-headers/iframes/free/minimal-floating-navbar.html (repo path: blocks/marketing/floating-headers/iframes/free/minimal-floating-navbar.html)
- Source markup reference:
  - partials/pro/personal-portfolio/navbars/main.html
  - partials/pro/personal-portfolio/navbars/logo.html
  - partials/pro/personal-portfolio/navbars/nav.html

<header class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm">
  <nav class="mt-4 relative max-w-2xl w-full bg-navbar border border-navbar-line rounded-3xl mx-2 flex flex-wrap md:flex-nowrap items-center justify-between p-1 ps-4 md:py-0 sm:mx-auto">
    <div class="flex items-center">
      
      <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="index.html" aria-label="Preline">
        <svg class="w-24 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
          <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
          <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
          <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
        </svg>
      </a>
      
    </div>

<div id="hs-pro-pnm" class="hidden hs-collapse overflow-hidden transition-all duration-300 basis-full grow md:block" aria-labelledby="hs-pro-pnm-collapse" role="region">
      <div class="flex flex-col md:flex-row md:items-center md:justify-end gap-2 md:gap-3 mt-3 md:mt-0 py-2 md:py-0 md:ps-7">
        <a class="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 hover:text-navbar-nav-foreground-hover focus:outline-hidden focus:navbar-nav-focus border-transparent text-navbar-nav-foreground/80"  href="#" aria-current="page">Home</a>
        <a class="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 hover:text-navbar-nav-foreground-hover focus:outline-hidden focus:navbar-nav-focus border-transparent text-navbar-nav-foreground/80"  href="#" aria-current="page">Work</a>
        <a class="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 hover:text-navbar-nav-foreground-hover focus:outline-hidden focus:navbar-nav-focus border-transparent text-navbar-nav-foreground/80"  href="#" aria-current="page">Reviews</a>
      </div>
    </div>
  </nav>
</header>

Open Personal Portfolio homepage

The rounded floating bar carries the brand, nav links, and one trailing CTA.

Create a responsive UI block named "Floating Navbar with CTA" 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/marketing/floating-headers/#floating-navbar-with-cta. 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: marketing/floating-headers
- Block ID: floating-navbar-with-cta
- Source description: The rounded floating bar carries the brand, nav links, and one trailing CTA.
- Preview iframe: https://preline.co/blocks/marketing/floating-headers/iframes/free/floating-navbar-with-cta.html (repo path: blocks/marketing/floating-headers/iframes/free/floating-navbar-with-cta.html)
- Source markup reference:
  - partials/blocks/sources/pages/header-floating-navbar-with-cta.html
  - partials/pro/digital-agency/navbars/main.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Floating pill header: `sticky top-4` with the visible bar drawn by a `before:` pseudo-element (`before:max-w-5xl before:mx-2 lg:before:mx-auto before:rounded-[26px] before:bg-navbar before:border before:border-navbar-line`); the nav itself is `max-w-5xl ... py-2 ps-5 pe-2 md:py-0`.
  - Left side is the Preline wordmark SVG (`w-28`, `aria-label="Preline"`) linking to `index.html`; right side holds one primary pill CTA reading `Request demo` plus a `size-9` circular hamburger toggle shown only below `md`.
  - Top-level nav items in order: plain link `Home`, then four dropdown triggers labelled `Company`, `Stories`, `News`, and `Product`.
  - Dropdown contents - `Company`: `About`, `Services`, `Careers`, `Careers: Job Details`, `Careers: Apply`; `Stories`: `Case Study`, `Case Study Details`; `News`: `News`, `News Details`.
  - `Product` opens a wide mega-menu (`md:w-150`) with two columns: `Build` over `Websites`, `Mobile apps`, `Pages`; and `Resources` over `Documentation`, `Support`; each row prefixed by a `size-1` primary dot and closing with an arrow that nudges on hover.
  - The mega-menu footer row carries the link `Sessions 2025 - Watch the product keynote live` on the left and a pill link `Changelog` on the right.
  - Behavior is Preline HSCollapse plus HSDropdown: the mobile panel `#hs-pro-an` is `hidden` by default and toggled by `data-hs-collapse`; every dropdown is closed on load (`aria-expanded="false"`, menu `hidden`) and uses `[--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside]`, so desktop menus open on hover and mobile menus expand inline.
  - No nav item is marked active in this block - there is no `aria-current` and no primary-colored link on first load.

<header class="sticky top-4 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full before:absolute before:inset-0 before:max-w-5xl before:mx-2 lg:before:mx-auto before:rounded before:rounded-[26px] before:bg-navbar before:border before:border-navbar-line">
  <nav class="relative max-w-5xl w-full flex flex-wrap md:flex-nowrap basis-full items-center justify-between py-2 ps-5 pe-2 md:py-0 mx-2 lg:mx-auto">
    <div class="flex items-center">
      
      <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
        <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
          <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
          <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
          <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
        </svg>
      </a>
      
    </div>
    
    
    <div class="md:order-3 flex items-center gap-x-3">
      <div class="md:ps-3">
        <a class="group inline-flex items-center gap-x-2 py-2 px-3 bg-primary border border-primary-line text-primary-foreground font-medium text-sm text-nowrap rounded rounded-[26px] focus:outline-hidden" href="#">
          Request demo
        </a>
      </div>

<div id="hs-pro-an" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block" aria-labelledby="hs-pro-an-collapse" role="region">
      
      <div class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-0">
        <div class="flex flex-col md:flex-row md:items-center md:justify-end gap-y-3 pt-6 pb-2 md:py-0 md:ps-7">
          <a class="md:px-3 md:py-4 text-sm focus:outline-hidden text-navbar-2-nav-foreground hover:text-navbar-2-nav-foreground-hover focus:text-navbar-2-nav-foreground-focus" href="index.html" >Home</a>
    
          
          <div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
            
            <button id="hs-pro-ancpd" type="button" class="hs-dropdown-toggle md:px-3 md:py-4 w-full md:w-auto flex items-center text-sm focus:outline-hidden text-navbar-2-nav-foreground hover:text-navbar-2-nav-foreground-hover focus:text-navbar-2-nav-foreground-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              Company
              <svg class="hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-1 shrink-0 size-3.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"><path d="m6 9 6 6 6-6"/></svg>
            </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] lg:duration-150 hs-dropdown-open:opacity-100 opacity-0 relative w-full md:w-50 hidden z-10 top-full rounded-2xl bg-dropdown border-4 border-dropdown-line md:shadow-xl before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5 md:after:hidden mt-2 md:mt-0" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ancpd">
              <div class="p-5 flex flex-col gap-y-3">
                <a class="text-sm hover:text-primary-hover focus:outline-hidden focus:text-primary-focus text-navbar-2-nav-foreground"  href="#" >About</a>
                <a class="text-sm hover:text-primary-hover focus:outline-hidden focus:text-primary-focus text-navbar-2-nav-foreground"  href="#" >Services</a>
                <a class="text-sm hover:text-primary-hover focus:outline-hidden focus:text-primary-focus text-navbar-2-nav-foreground"  href="#" >Careers</a>
                <a class="text-sm hover:text-primary-hover focus:outline-hidden focus:text-primary-focus text-navbar-2-nav-foreground"  href="#" >Careers: Job Details</a>
                <a class="text-sm hover:text-primary-hover focus:outline-hidden focus:text-primary-focus text-navbar-2-nav-foreground"  href="#" >Careers: Apply</a>
              </div>
            </div>
            
          </div>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
            
            <button id="hs-pro-anstd" type="button" class="hs-dropdown-toggle md:px-3 md:py-4 w-full md:w-auto flex items-center text-sm focus:outline-hidden text-navbar-2-nav-foreground hover:text-navbar-2-nav-foreground-hover focus:text-navbar-2-nav-foreground-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              Stories
              <svg class="hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-1 shrink-0 size-3.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"><path d="m6 9 6 6 6-6"/></svg>
            </button>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
            
            <button id="hs-pro-anbld" type="button" class="hs-dropdown-toggle md:px-3 md:py-4 w-full md:w-auto flex items-center text-sm focus:outline-hidden text-navbar-2-nav-foreground hover:text-navbar-2-nav-foreground-hover focus:text-navbar-2-nav-foreground-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              News
              <svg class="hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-1 shrink-0 size-3.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"><path d="m6 9 6 6 6-6"/></svg>
            </button>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
            
            <button id="hs-pro-anpd" type="button" class="hs-dropdown-toggle md:px-3 md:py-4 w-full md:w-auto flex items-center text-sm text-navbar-2-nav-foreground hover:text-navbar-2-nav-foreground-hover focus:outline-hidden focus:text-navbar-2-nav-foreground-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              Product
              <svg class="hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-1 shrink-0 size-3.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"><path d="m6 9 6 6 6-6"/></svg>
            </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] lg:duration-150 hs-dropdown-open:opacity-100 opacity-0 relative w-full md:w-150 hidden z-10 top-full inset-e-0 rounded-2xl bg-dropdown border-4 border-dropdown-line md:shadow-xl before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5 md:after:hidden mt-2 md:mt-0" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-anpd">
              <div class="flex flex-col gap-y-1">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-1">
                  <div class="p-5 md:min-h-50 flex flex-col justify-between bg-layer rounded-t-xl md:rounded-tr-none md:rounded-tl-xl">
                    
                    <div class="mb-5">
                      <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                        Build
                        <span class="ms-auto size-6 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-sm">
                          <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                        </span>
                      </a>
                    </div>

<ul class="flex flex-col">
                      <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                        <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                          <span class="size-1 bg-primary rounded-full"></span>
                          Websites
                          <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                            <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                          </span>
                        </a>
                      </li>
                
                      <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                        <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                          <span class="size-1 bg-primary rounded-full"></span>
                          Mobile apps
                          <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                            <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                          </span>
                        </a>
                      </li>
                
                      <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                        <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                          <span class="size-1 bg-primary rounded-full"></span>
                          Pages
                          <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                            <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                          </span>
                        </a>
                      </li>
                    </ul>
                    
                  </div>

<div class="p-5 md:min-h-50 flex flex-col justify-between bg-layer md:rounded-tr-xl">
                    
                    <div class="mb-5">
                      <a class="group flex items-center gap-x-3 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                        Resources
                        <span class="ms-auto size-6 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-sm">
                          <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                        </span>
                      </a>
                    </div>

<ul class="flex flex-col">
                      <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                        <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                          <span class="size-1 bg-primary rounded-full"></span>
                          Documentation
                          <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                            <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                          </span>
                        </a>
                      </li>
                
                      <li class="py-2 first:pt-0 last:pb-0 first:border-t-0 border-t border-line-1">
                        <a class="group flex items-center gap-x-2 font-medium text-sm text-navbar-2-nav-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                          <span class="size-1 bg-primary rounded-full"></span>
                          Support
                          <span class="ms-auto size-6 flex shrink-0 justify-center items-center">
                            <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                          </span>
                        </a>
                      </li>
                    </ul>
                    
                  </div>
                  
                </div>

<div class="p-2 bg-layer rounded-b-xl">
                  <div class="flex flex-wrap justify-between items-center gap-1">
                    <a class="py-1.5 ps-3 pe-2 group flex items-center gap-x-1 font-medium text-sm text-foreground hover:text-primary-hover focus:text-primary-focus focus:outline-hidden" href="#">
                      Sessions 2025 ‐ Watch the product keynote live
                      <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-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"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                    </a>

<a class="py-1.5 px-3 font-medium text-sm text-primary rounded-full hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
                      Changelog
                    </a>
                  </div>
                </div>
                
              </div>
            </div>
            
          </div>
          
        </div>
      </div>

</div>
    
  </nav>
</header>

Floating Headers

Floating Website Header Free

Split Pill Navbar New Pro

Minimal Floating Navbar Free

Floating Navbar with CTA Free