Tailwind CSS Content Navigation Blocks

All Blocks
Marketing
Content Navigation

Content Navigation

Tailwind CSS content navigation blocks for website sections, discovery flows, feature tabs, and lightweight page-level navigation patterns.

Vertical Feature Tabs with Overlapping Panel Free

The vertical tab list sits beside one larger content panel, with the panel overlapping the background block.

Create a responsive UI block named "Vertical Feature Tabs with Overlapping Panel" 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/content-navigation/#vertical-feature-tabs-with-overlapping-panel. 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/content-navigation
- Block ID: vertical-feature-tabs-with-overlapping-panel
- Source description: The vertical tab list sits beside one larger content panel, with the panel overlapping the background block.
- Preview iframe: https://preline.co/blocks/marketing/content-navigation/iframes/free/vertical-feature-tabs-with-overlapping-panel.html (repo path: blocks/marketing/content-navigation/iframes/free/vertical-feature-tabs-with-overlapping-panel.html)
- Source markup reference:
  - partials/blocks/sources/pages/fn-vertical-tabs-with-overlapping-background.html

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

Block-specific fidelity rules:
- Preserve 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):
  - Heading `Fully customizable rules to match your unique needs` lives in the text column, which is `lg:col-span-6 lg:col-start-8 lg:order-2` inside a 12-column grid - so copy sits right and the image panel left at lg+.
  - Exactly 3 vertically stacked tabs wired for Preline tabs (`data-hs-tab="#tabs-with-card-1"` through `#tabs-with-card-3`, `role="tablist"` with `aria-orientation="vertical"`); tab 1 has `active` and `aria-selected="true"`, panels 2 and 3 start `hidden`.
  - Tab copy in order: `Advanced tools` / `Use Preline thoroughly thought and automated libraries to manage your businesses.`; `Smart dashboards` / `Quickly Preline sample components, copy-paste codes, and start right off.`; `Powerful features` / `Reduce time and effort on building modern look design with Preline only.`
  - Active tab styling is `hs-tab-active:bg-layer hs-tab-active:shadow-md` on a `p-4 md:p-5 rounded-xl` button, with `hs-tab-active:text-primary-active` on the `size-6 md:size-7` icon and the `text-lg` title.
  - Each panel is a single `shadow-xl rounded-xl` Unsplash portrait image (560x720), one distinct photo per tab, with no captions or overlays.
  - A decorative three-stroke squiggle SVG (`w-16`, `text-orange-500`) is absolutely positioned at the top right of the image panel and hidden below md.
  - The overlapping background is an absolutely positioned `bg-surface` panel in a 12-column grid layer (`lg:col-span-7 lg:col-start-6`, `h-5/6 sm:h-3/4 lg:h-full rounded-xl`) sitting behind the content, which itself is inside a `relative p-6 md:p-16` frame.

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

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

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

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

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <div class="relative p-6 md:p-16">
    
    <div class="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
      <div class="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
        <h2 class="text-2xl text-foreground font-bold sm:text-3xl">
          Fully customizable rules to match your unique needs
        </h2>

<nav class="grid gap-4 mt-5 md:mt-10" aria-label="Tabs" role="tablist" aria-orientation="vertical">
          <button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus p-4 md:p-5 rounded-xl active" id="tabs-with-card-item-1" aria-selected="true" data-hs-tab="#tabs-with-card-1" aria-controls="tabs-with-card-1" role="tab">
            <span class="flex gap-x-6">
              <svg class="shrink-0 mt-2 size-6 md:size-7 hs-tab-active:text-primary-active text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/></svg>
              <span class="grow">
                <span class="block text-lg font-semibold hs-tab-active:text-primary-active text-foreground">Advanced tools</span>
                <span class="block mt-1 text-foreground">Use Preline thoroughly thought and automated libraries to manage your businesses.</span>
              </span>
            </span>
          </button>

<button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus p-4 md:p-5 rounded-xl" id="tabs-with-card-item-2" aria-selected="false" data-hs-tab="#tabs-with-card-2" aria-controls="tabs-with-card-2" role="tab">
            <span class="flex gap-x-6">
              <svg class="shrink-0 mt-2 size-6 md:size-7 hs-tab-active:text-primary-active text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
              <span class="grow">
                <span class="block text-lg font-semibold hs-tab-active:text-primary-active text-foreground">Smart dashboards</span>
                <span class="block mt-1 text-foreground">Quickly Preline sample components, copy-paste codes, and start right off.</span>
              </span>
            </span>
          </button>

<button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus p-4 md:p-5 rounded-xl" id="tabs-with-card-item-3" aria-selected="false" data-hs-tab="#tabs-with-card-3" aria-controls="tabs-with-card-3" role="tab">
            <span class="flex gap-x-6">
              <svg class="shrink-0 mt-2 size-6 md:size-7 hs-tab-active:text-primary-active text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
              <span class="grow">
                <span class="block text-lg font-semibold hs-tab-active:text-primary-active text-foreground">Powerful features</span>
                <span class="block mt-1 text-foreground">Reduce time and effort on building modern look design with Preline only.</span>
              </span>
            </span>
          </button>
        </nav>
        
      </div>

<div class="hidden absolute top-0 inset-e-0 translate-x-20 md:block lg:translate-x-20">
            <svg class="w-16 h-auto text-orange-500" width="121" height="135" viewBox="0 0 121 135" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
              <path d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
              <path d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
            </svg>
          </div>
          
        </div>
      </div>
      
    </div>

<div class="absolute inset-0 grid grid-cols-12 size-full">
      <div class="col-span-full lg:col-span-7 lg:col-start-6 bg-surface w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full"></div>
    </div>
    
  </div>
</div>

Horizontal Feature Tabs with Icons Free

Icon-led tabs run in one row, with each item carrying a short supporting line under the label.

Create a responsive UI block named "Horizontal Feature Tabs with Icons" 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/content-navigation/#horizontal-feature-tabs-with-icons. 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/content-navigation
- Block ID: horizontal-feature-tabs-with-icons
- Source description: Icon-led tabs run in one row, with each item carrying a short supporting line under the label.
- Preview iframe: https://preline.co/blocks/marketing/content-navigation/iframes/free/horizontal-feature-tabs-with-icons.html (repo path: blocks/marketing/content-navigation/iframes/free/horizontal-feature-tabs-with-icons.html)
- Source markup reference:
  - partials/blocks/sources/pages/fn-horizontal-tabs-with-icon-and-description.html

Block-specific fidelity rules:
- 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):
  - Exactly 3 tabs wired for Preline tabs: `nav` with `role="tablist"`, buttons carrying `data-hs-tab="#tabs-with-card-1"` through `#tabs-with-card-3` plus matching `aria-controls`; tab 1 has `active` and `aria-selected="true"`, panels 2 and 3 start `hidden`.
  - Tab copy in order: `All-in-one workspace` / `Create a business, whether you’ve got a fresh idea.`; `Automation on a whole new level` / `Use automation to scale campaigns profitably and save time doing it.`; `Solving problems for every team` / `One tool for your company to share knowledge and ship projects.`
  - Nav is `max-w-6xl mx-auto flex flex-col sm:flex-row`; each tab button is a full-width `p-3 md:p-5 rounded-xl` column with `hs-tab-active:bg-muted-active` and `hs-tab-active:text-primary-active` on both its icon and title.
  - Tab icons are `size-7` and hidden below sm; the tab description line is hidden below lg, so small screens show title only.
  - Every panel renders the same device pair inside a `max-w-285` frame: a `w-60` phone mockup absolutely positioned bottom-left (only visible at lg+) layered behind a `w-3xl` browser figure with three dots and the address text `www.preline.co`.
  - Panel media differs per tab - phone mockups img9, img13, img13 and browser previews img9.webp, img2.webp, img42.webp from the local assets folders.
  - There is no headline, eyebrow, or CTA above or below the tabs.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <nav class="max-w-6xl mx-auto flex flex-col sm:flex-row gap-y-px sm:gap-y-0 sm:gap-x-4" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
    <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus p-3 md:p-5 rounded-xl active" id="tabs-with-card-item-1" aria-selected="true" data-hs-tab="#tabs-with-card-1" aria-controls="tabs-with-card-1" role="tab">
      <svg class="shrink-0 hidden sm:block size-7 hs-tab-active:text-primary-active text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/></svg>
      <span class="sm:mt-5">
        <span class="hs-tab-active:text-primary-active block font-semibold text-foreground">All-in-one workspace</span>
        <span class="hidden lg:block mt-2 text-foreground">Create a business, whether you’ve got a fresh idea.</span>
      </span>
    </button>

<button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus p-3 md:p-5 rounded-xl" id="tabs-with-card-item-2" aria-selected="false" data-hs-tab="#tabs-with-card-2" aria-controls="tabs-with-card-2" role="tab">
      <svg class="shrink-0 hidden sm:block size-7 hs-tab-active:text-primary-active text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
      <span class="sm:mt-5">
        <span class="hs-tab-active:text-primary-active block font-semibold text-foreground">Automation on a whole new level</span>
        <span class="hidden lg:block mt-2 text-foreground">Use automation to scale campaigns profitably and save time doing it.</span>
      </span>
    </button>

<button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus p-3 md:p-5 rounded-xl" id="tabs-with-card-item-3" aria-selected="false" data-hs-tab="#tabs-with-card-3" aria-controls="tabs-with-card-3" role="tab">
      <svg class="shrink-0 hidden sm:block size-7 hs-tab-active:text-primary-active text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
      <span class="sm:mt-5">
        <span class="hs-tab-active:text-primary-active block font-semibold text-foreground">Solving problems for every team</span>
        <span class="hidden lg:block mt-2 text-foreground">One tool for your company to share knowledge and ship projects.</span>
      </span>
    </button>
  </nav>

<div class="mt-12 md:mt-16">
    <div id="tabs-with-card-1" role="tabpanel" aria-labelledby="tabs-with-card-item-1">
      
      <div class="max-w-285 lg:pb-32 relative">
        
        <figure class="hidden absolute bottom-0 inset-s-0 z-2 max-w-full w-60 h-auto mb-20 ms-20 lg:block">
          <div class="p-1.5 bg-surface shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75/20%),0_2rem_4rem_-2rem_rgb(45_55_75/30%),inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75/20%)] dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0/20%),0_2rem_4rem_-2rem_rgb(0_0_0/30%),inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0/20%)] rounded-3xl">
            <img class="max-w-full rounded rounded-[1.25rem] h-auto" src="../../../assets/img/mockups/img9.jpg" alt="Features Image">
          </div>
        </figure>

<figure class="ms-auto me-20 relative z-1 max-w-full w-3xl h-auto shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75/20%),0_0_5rem_-2rem_rgb(45_55_75/15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0/20%),0_0_5rem_-2rem_rgb(0_0_0/15%)] rounded-b-lg">
          <div class="relative flex items-center max-w-3xl bg-layer border-b border-layer-line rounded-t-lg py-2 px-24">
            <div class="flex gap-x-1 absolute top-2/4 inset-s-4 -translate-y-1">
              <span class="size-2 bg-surface-1 rounded-full"></span>
              <span class="size-2 bg-surface-1 rounded-full"></span>
              <span class="size-2 bg-surface-1 rounded-full"></span>
            </div>
            <div class="flex justify-center items-center size-full bg-surface-1 text-[.25rem] text-foreground sm:text-[.5rem] rounded-sm">www.preline.co</div>
          </div>