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.

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

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