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 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>