Tailwind CSS Tabs

Build Tailwind CSS tabs with accessible tab panels, JavaScript behavior, underline, vertical, pill, segmented, scrollable, mobile-select, and hover variants.

Requires JS

Note that this component requires the use of our Tabs plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Behavior and accessibility

Use the Tabs plugin to build accessible Tailwind CSS tab panels that switch between local content panes with JavaScript.

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

Underline tabs

Default tabs with an underline that marks the active item.

<div class="mt-3">
                            <div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                              </p>
                            </div>
                            <div id="tabs-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-2">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                              </p>
                            </div>
                            <div id="tabs-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-3">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                              </p>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

Tabs with icons

Add icons to tab labels while keeping the same contained tab layout.

<div class="border-b border-line-2">
                            <nav id="hs-tabs" class="flex  gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="tabs-with-underline-item-1" aria-selected="true" data-hs-tab="#tabs-with-underline-1" aria-controls="tabs-with-underline-1" role="tab">
                                <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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                                Tab 1
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-2" aria-selected="false" data-hs-tab="#tabs-with-underline-2" aria-controls="tabs-with-underline-2" role="tab">
                                <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"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
                                Tab 2
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-3" aria-selected="false" data-hs-tab="#tabs-with-underline-3" aria-controls="tabs-with-underline-3" role="tab">
                                <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>
                                Tab 3
                              </button>
                            </nav>
                          </div>

Auto-centered tabs

Automatically scroll the tab list so the active tab stays centered.

Require JS

Note that this demo requires the use of our Scroll Nav plugin, else you can skip this message if you are already using Preline UI as a package. We also include Lodash to use the utility functions provided by this library.

Learn more

This is the first item's tab body.

Tabs with badges

Add badge counts or status indicators directly inside tab labels.

<div class="border-b border-line-2">
                            <nav id="hs-tabs" class="flex  gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="tabs-with-underline-item-1" aria-selected="true" data-hs-tab="#tabs-with-underline-1" aria-controls="tabs-with-underline-1" role="tab">
                                Tab 1
                                <span class="hs-tab-active:bg-primary-100 hs-tab-active:text-primary-600 dark:hs-tab-active:bg-primary-500/20 dark:hs-tab-active:text-primary-400 ms-1 py-0.5 px-1.5 rounded-full text-xs font-medium bg-surface text-surface-foreground">99+</span>
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-2" aria-selected="false" data-hs-tab="#tabs-with-underline-2" aria-controls="tabs-with-underline-2" role="tab">
                                Tab 2
                                <span class="hs-tab-active:bg-primary-100 hs-tab-active:text-primary-600 dark:hs-tab-active:bg-primary-500/20 dark:hs-tab-active:text-primary-400 ms-1 py-0.5 px-1.5 rounded-full text-xs font-medium bg-surface text-surface-foreground">99+</span>
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-3" aria-selected="false" data-hs-tab="#tabs-with-underline-3" aria-controls="tabs-with-underline-3" role="tab">
                                Tab 3
                              </button>
                            </nav>
                          </div>

Tab alignment

Center-align the tab list with .justify-center.

<div class="border-b border-line-2">
                            <nav id="hs-tabs" class="flex justify-center gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="tabs-with-underline-item-1" aria-selected="true" data-hs-tab="#tabs-with-underline-1" aria-controls="tabs-with-underline-1" role="tab">
                                Tab 1
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-2" aria-selected="false" data-hs-tab="#tabs-with-underline-2" aria-controls="tabs-with-underline-2" role="tab">
                                Tab 2
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-3" aria-selected="false" data-hs-tab="#tabs-with-underline-3" aria-controls="tabs-with-underline-3" role="tab">
                                Tab 3
                              </button>
                            </nav>
                          </div>

Right-aligned tabs

Right-align the tab list with .justify-end.

<div class="border-b border-line-2">
                            <nav id="hs-tabs" class="flex justify-end gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="tabs-with-underline-item-1" aria-selected="true" data-hs-tab="#tabs-with-underline-1" aria-controls="tabs-with-underline-1" role="tab">
                                Tab 1
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-2" aria-selected="false" data-hs-tab="#tabs-with-underline-2" aria-controls="tabs-with-underline-2" role="tab">
                                Tab 2
                              </button>
                              <button type="button" class="hs-tab-active:font-semibold hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-4 px-1 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-bottom-px after:inset-x-0 after:w-full after:h-0.5 after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-3" aria-selected="false" data-hs-tab="#tabs-with-underline-3" aria-controls="tabs-with-underline-3" role="tab">
                                Tab 3
                              </button>
                            </nav>
                          </div>

Vertical tabs

Stack the tab navigation vertically when it needs to sit beside the content.

<div class="ms-3">
                              <div id="vertical-tab-with-border-1" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-1">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                                </p>
                              </div>
                              <div id="vertical-tab-with-border-2" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-2">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                                </p>
                              </div>
                              <div id="vertical-tab-with-border-3" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-3">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                                </p>
                              </div>
                            </div>
                            
                          </div>
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

Card-style tabs

Use a card-like container to visually separate the tab list from the page.

<div class="mt-3">
                            <div id="card-type-tab-preview" role="tabpanel" aria-labelledby="card-type-tab-item-1">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                              </p>
                            </div>
                            <div id="card-type-tab-2" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-2">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                              </p>
                            </div>
                            <div id="card-type-tab-3" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-3">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                              </p>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

<div class="border-b border-line-2">
                            <nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                              <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-b-transparent hs-tab-active:text-primary-active -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-muted text-sm font-medium text-center border border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-foreground focus:outline-hidden focus:text-foreground disabled:opacity-50 disabled:pointer-events-none active" id="card-type-tab-item-1" aria-selected="true" data-hs-tab="#card-type-tab-preview" aria-controls="card-type-tab-preview" role="tab">
                                Tab 1
                              </button>
                              <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-b-transparent hs-tab-active:text-primary-active -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-muted text-sm font-medium text-center border border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-foreground focus:outline-hidden focus:text-foreground disabled:opacity-50 disabled:pointer-events-none" id="card-type-tab-item-2" aria-selected="false" data-hs-tab="#card-type-tab-2" aria-controls="card-type-tab-2" role="tab">
                                Tab 2
                              </button>
                              <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-b-transparent hs-tab-active:text-primary-active -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-muted text-sm font-medium text-center border border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-foreground focus:outline-hidden focus:text-foreground disabled:opacity-50 disabled:pointer-events-none" id="card-type-tab-item-3" aria-selected="false" data-hs-tab="#card-type-tab-3" aria-controls="card-type-tab-3" role="tab">
                                Tab 3
                              </button>
                            </nav>
                          </div>

Scrollable tabs

Let the tab list scroll horizontally when there are more tabs than the available width.

Resize the example to see it in action.

<div class="mt-3">
                            <div id="horizontal-scroll-tab-preview" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-1">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                              </p>
                            </div>
                            <div id="horizontal-scroll-tab-2" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-2">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                              </p>
                            </div>
                            <div id="horizontal-scroll-tab-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-3">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                              </p>
                            </div>
                            <div id="horizontal-scroll-tab-4" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-4">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">fourth</em> item's tab body.
                              </p>
                            </div>
                            <div id="horizontal-scroll-tab-5" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-5">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">fifth</em> item's tab body.
                              </p>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

<nav class="pb-1 flex gap-x-1 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                            <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary-active hs-tab-active:text-primary-active py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="horizontal-scroll-tab-item-1" aria-selected="true" data-hs-tab="#horizontal-scroll-tab-preview" aria-controls="horizontal-scroll-tab-preview" role="tab">
                              Long tab link 1
                            </button>
                            <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary-active hs-tab-active:text-primary-active py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="horizontal-scroll-tab-item-2" aria-selected="false" data-hs-tab="#horizontal-scroll-tab-2" aria-controls="horizontal-scroll-tab-2" role="tab">
                              Long tab link 2
                            </button>
                            <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary-active hs-tab-active:text-primary-active py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="horizontal-scroll-tab-item-3" aria-selected="false" data-hs-tab="#horizontal-scroll-tab-3" aria-controls="horizontal-scroll-tab-3" role="tab">
                              Long tab link 3
                            </button>
                            <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary-active hs-tab-active:text-primary-active py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="horizontal-scroll-tab-item-4" aria-selected="false" data-hs-tab="#horizontal-scroll-tab-4" aria-controls="horizontal-scroll-tab-4" role="tab">
                              Long tab link 4
                            </button>
                            <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary-active hs-tab-active:text-primary-active py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="horizontal-scroll-tab-item-5" aria-selected="false" data-hs-tab="#horizontal-scroll-tab-5" aria-controls="horizontal-scroll-tab-5" role="tab">
                              Long tab link 5
                            </button>
                          </nav>

Tabs with mobile select

Swap the tab list for a <select> on smaller screens to save horizontal space.

Resize the example to see it in action.

<div class="hidden sm:block border-b border-line-2">
                            <nav class="flex gap-x-2" aria-label="Tabs" role="tablist" data-hs-tab-select="#tab-select">
                              <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-b-transparent hs-tab-active:text-primary-active -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-muted text-sm font-medium text-center border border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-foreground focus:outline-hidden focus:text-foreground disabled:opacity-50 disabled:pointer-events-none active" id="hs-tab-to-select-item-1" aria-selected="true" data-hs-tab="#hs-tab-to-select-1" aria-controls="hs-tab-to-select-1" role="tab">
                                Tab 1
                              </button>
                              <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-b-transparent hs-tab-active:text-primary-active -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-muted text-sm font-medium text-center border border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-foreground focus:outline-hidden focus:text-foreground disabled:opacity-50 disabled:pointer-events-none" id="hs-tab-to-select-item-2" aria-selected="false" data-hs-tab="#hs-tab-to-select-2" aria-controls="hs-tab-to-select-2" role="tab">
                                Tab 2
                              </button>
                              <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-b-transparent hs-tab-active:text-primary-active -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-muted text-sm font-medium text-center border border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-foreground focus:outline-hidden focus:text-foreground disabled:opacity-50 disabled:pointer-events-none" id="hs-tab-to-select-item-3" aria-selected="false" data-hs-tab="#hs-tab-to-select-3" aria-controls="hs-tab-to-select-3" role="tab">
                                Tab 3
                              </button>
                            </nav>
                          </div>

<div class="mt-3">
                            <div id="hs-tab-to-select-1" role="tabpanel" aria-labelledby="hs-tab-to-select-item-1">
                              <div class="p-3 sm:p-0">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                                </p>
                              </div>
                            </div>
                            <div id="hs-tab-to-select-2" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-item-2">
                              <div class="p-3 sm:p-0">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                                </p>
                              </div>
                            </div>
                            <div id="hs-tab-to-select-3" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-item-3">
                              <div class="p-3 sm:p-0">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                                </p>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

<select id="tab-select" class="sm:hidden py-3 px-4 pe-9 block w-full border-line-2 rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus" aria-label="Tabs">
                            <option value="#hs-tab-to-select-1">Tab 1</option>
                            <option value="#hs-tab-to-select-2">Tab 2</option>
                            <option value="#hs-tab-to-select-3">Tab 3</option>
                          </select>

Segmented tabs

Use a segmented control treatment for compact tab switching.

<div class="mt-3">
                            <div id="segment-1" role="tabpanel" aria-labelledby="segment-item-1">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                              </p>
                            </div>
                            <div id="segment-2" class="hidden" role="tabpanel" aria-labelledby="segment-item-2">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                              </p>
                            </div>
                            <div id="segment-3" class="hidden" role="tabpanel" aria-labelledby="segment-item-3">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                              </p>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

<div class="flex">
                            <div class="flex bg-surface hover:bg-surface-hover rounded-lg transition p-1">
                              <nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                                <button type="button" class="hs-tab-active:bg-layer hs-tab-active:text-layer-foreground py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm text-muted-foreground-1 focus:outline-hidden font-medium rounded-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="segment-item-1" aria-selected="true" data-hs-tab="#segment-1" aria-controls="segment-1" role="tab">
                                  Tab 1
                                </button>
                                <button type="button" class="hs-tab-active:bg-layer hs-tab-active:text-layer-foreground py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm text-muted-foreground-1 focus:outline-hidden font-medium rounded-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="segment-item-2" aria-selected="false" data-hs-tab="#segment-2" aria-controls="segment-2" role="tab">
                                  Tab 2
                                </button>
                                <button type="button" class="hs-tab-active:bg-layer hs-tab-active:text-layer-foreground py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm text-muted-foreground-1 focus:outline-hidden font-medium rounded-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="segment-item-3" aria-selected="false" data-hs-tab="#segment-3" aria-controls="segment-3" role="tab">
                                  Tab 3
                                </button>
                              </nav>
                            </div>
                          </div>

Underline bar tabs

Use a stronger underline bar style to emphasize the active tab.

<div class="mt-3">
                            <div id="bar-with-underline-1" role="tabpanel" aria-labelledby="bar-with-underline-item-1">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                              </p>
                            </div>
                            <div id="bar-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-2">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                              </p>
                            </div>
                            <div id="bar-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-3">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                              </p>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

<nav class="relative z-0 flex border border-line-2 rounded-xl overflow-hidden" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                            <button type="button" class="hs-tab-active:border-b-primary-active hs-tab-active:text-foreground relative min-w-0 flex-1 bg-layer first:border-s-0 border-s border-b-2 border-layer-line py-4 px-4 text-muted-foreground-1 hover:text-foreground text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:z-10 focus:outline-hidden focus:text-foreground focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none active" id="bar-with-underline-item-1" aria-selected="true" data-hs-tab="#bar-with-underline-1" aria-controls="bar-with-underline-1" role="tab">
                              Tab 1
                            </button>
                            <button type="button" class="hs-tab-active:border-b-primary-active hs-tab-active:text-foreground relative min-w-0 flex-1 bg-layer first:border-s-0 border-s border-b-2 border-layer-line py-4 px-4 text-muted-foreground-1 hover:text-foreground text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:z-10 focus:outline-hidden focus:text-foreground focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" id="bar-with-underline-item-2" aria-selected="false" data-hs-tab="#bar-with-underline-2" aria-controls="bar-with-underline-2" role="tab">
                              Tab 2
                            </button>
                            <button type="button" class="hs-tab-active:border-b-primary-active hs-tab-active:text-foreground relative min-w-0 flex-1 bg-layer first:border-s-0 border-s border-b-2 border-layer-line py-4 px-4 text-muted-foreground-1 hover:text-foreground text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:z-10 focus:outline-hidden focus:text-foreground focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" id="bar-with-underline-item-3" aria-selected="false" data-hs-tab="#bar-with-underline-3" aria-controls="bar-with-underline-3" role="tab">
                              Tab 3
                            </button>
                          </nav>

Pills on stone surface

Place pill tabs on a muted stone surface for extra contrast.

<div class="mt-3">
                            <div id="pills-on-gray-color-1" role="tabpanel" aria-labelledby="pills-on-gray-color-item-1">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                              </p>
                            </div>
                            <div id="pills-on-gray-color-2" class="hidden" role="tabpanel" aria-labelledby="pills-on-gray-color-item-2">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                              </p>
                            </div>
                            <div id="pills-on-gray-color-3" class="hidden" role="tabpanel" aria-labelledby="pills-on-gray-color-item-3">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                              </p>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

<nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                            <button type="button" class="hs-tab-active:bg-surface-active hs-tab-active:text-surface-foreground hs-tab-active:hover:text-surface-foreground py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 rounded-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="pills-on-gray-color-item-1" aria-selected="true" data-hs-tab="#pills-on-gray-color-1" aria-controls="pills-on-gray-color-1" role="tab">
                              Tab 1
                            </button>
                            <button type="button" class="hs-tab-active:bg-surface-active hs-tab-active:text-surface-foreground hs-tab-active:hover:text-surface-foreground py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 rounded-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="pills-on-gray-color-item-2" aria-selected="false" data-hs-tab="#pills-on-gray-color-2" aria-controls="pills-on-gray-color-2" role="tab">
                              Tab 2
                            </button>
                            <button type="button" class="hs-tab-active:bg-surface-active hs-tab-active:text-surface-foreground hs-tab-active:hover:text-surface-foreground py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 rounded-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="pills-on-gray-color-item-3" aria-selected="false" data-hs-tab="#pills-on-gray-color-3" aria-controls="pills-on-gray-color-3" role="tab">
                              Tab 3
                            </button>
                          </nav>

Brand-color pills

Highlight the active tab with brand-colored pill styling.

<div class="mt-3">
                            <div id="pills-with-brand-color-1" role="tabpanel" aria-labelledby="pills-with-brand-color-item-1">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                              </p>
                            </div>
                            <div id="pills-with-brand-color-2" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-2">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                              </p>
                            </div>
                            <div id="pills-with-brand-color-3" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-3">
                              <p class="text-muted-foreground-1">
                                This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                              </p>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

<nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex  items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none active" id="pills-with-brand-color-item-1" aria-selected="true" data-hs-tab="#pills-with-brand-color-1" aria-controls="pills-with-brand-color-1" role="tab">
                              Tab 1
                            </button>
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex  items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="pills-with-brand-color-item-2" aria-selected="false" data-hs-tab="#pills-with-brand-color-2" aria-controls="pills-with-brand-color-2" role="tab">
                              Tab 2
                            </button>
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex  items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="pills-with-brand-color-item-3" aria-selected="false" data-hs-tab="#pills-with-brand-color-3" aria-controls="pills-with-brand-color-3" role="tab">
                              Tab 3
                            </button>
                          </nav>

Fill and justify tabs

Stretch the tab list across the available width without forcing every item to be the same size.

<nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex flex-auto justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none active" id="pills-with-brand-color-item-1" aria-selected="true" data-hs-tab="#pills-with-brand-color-1" aria-controls="pills-with-brand-color-1" role="tab">
                              Tab 1
                            </button>
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex flex-auto justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="pills-with-brand-color-item-2" aria-selected="false" data-hs-tab="#pills-with-brand-color-2" aria-controls="pills-with-brand-color-2" role="tab">This is the longest link I've seen
                            </button>
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex flex-auto justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="pills-with-brand-color-item-3" aria-selected="false" data-hs-tab="#pills-with-brand-color-3" aria-controls="pills-with-brand-color-3" role="tab">
                              Tab 3
                            </button>
                          </nav>

Equal-width tabs

Make each tab take an equal share of the available width.

<nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex basis-0 grow justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none active" id="pills-with-brand-color-item-1" aria-selected="true" data-hs-tab="#pills-with-brand-color-1" aria-controls="pills-with-brand-color-1" role="tab">
                              Tab 1
                            </button>
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex basis-0 grow justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="pills-with-brand-color-item-2" aria-selected="false" data-hs-tab="#pills-with-brand-color-2" aria-controls="pills-with-brand-color-2" role="tab">This is the longest link I've seen
                            </button>
                            <button type="button" class="hs-tab-active:bg-primary-active hs-tab-active:text-primary-foreground hs-tab-active:hover:text-primary-foreground py-3 px-4 inline-flex basis-0 grow justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="pills-with-brand-color-item-3" aria-selected="false" data-hs-tab="#pills-with-brand-color-3" aria-controls="pills-with-brand-color-3" role="tab">
                              Tab 3
                            </button>
                          </nav>

Hover-triggered tabs New

Switch panes on hover instead of click for pointer-driven interactions.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-5"><div class="flex flex-wrap">
                            
                            <div class="border-e border-line-2">
                              <nav class="flex flex-col space-y-2" aria-label="Tabs" role="tablist" aria-orientation="horizontal" data-hs-tabs='{
                                "eventType": "hover"
                              }'>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none active" id="open-on-hover-tab-item-1" aria-selected="true" data-hs-tab="#open-on-hover-tab-1" aria-controls="open-on-hover-tab-1" role="tab">
                                  Tab 1
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-2" aria-selected="false" data-hs-tab="#open-on-hover-tab-2" aria-controls="open-on-hover-tab-2" role="tab">
                                  Tab 2
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-3" aria-selected="false" data-hs-tab="#open-on-hover-tab-3" aria-controls="open-on-hover-tab-3" role="tab">
                                  Tab 3
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-4" aria-selected="false" data-hs-tab="#open-on-hover-tab-4" aria-controls="open-on-hover-tab-4" role="tab">
                                  Tab 4
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-5" aria-selected="false" data-hs-tab="#open-on-hover-tab-5" aria-controls="open-on-hover-tab-5" role="tab">
                                  Tab 5
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-6" aria-selected="false" data-hs-tab="#open-on-hover-tab-6" aria-controls="open-on-hover-tab-6" role="tab">
                                  Tab 6
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-7" aria-selected="false" data-hs-tab="#open-on-hover-tab-7" aria-controls="open-on-hover-tab-7" role="tab">
                                  Tab 7
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-8" aria-selected="false" data-hs-tab="#open-on-hover-tab-8" aria-controls="open-on-hover-tab-8" role="tab">
                                  Tab 8
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-9" aria-selected="false" data-hs-tab="#open-on-hover-tab-9" aria-controls="open-on-hover-tab-9" role="tab">
                                  Tab 9
                                </button>
                                <button type="button" class="hs-tab-active:text-primary-active hs-tab-active:after:bg-primary-active relative py-1 pe-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-muted-foreground-1 after:absolute after:-inset-e-px after:inset-y-0 after:w-0.5 after:h-full after:bg-transparent hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" id="open-on-hover-tab-item-10" aria-selected="false" data-hs-tab="#open-on-hover-tab-10" aria-controls="open-on-hover-tab-10" role="tab">
                                  Tab 10
                                </button>
                              </nav>
                            </div>

<div class="ms-3">
                              <div id="open-on-hover-tab-1" role="tabpanel" aria-labelledby="open-on-hover-tab-item-1">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-2" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-2">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-3" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-3">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-4" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-4">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">fourth</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-5" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-5">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">fifth</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-6" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-6">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">sixth</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-7" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-7">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">seventh</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-8" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-8">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">eighth</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-9" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-9">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">ninth</em> item's tab body.
                                </p>
                              </div>
                              <div id="open-on-hover-tab-10" class="hidden" role="tabpanel" aria-labelledby="open-on-hover-tab-item-10">
                                <p class="text-muted-foreground-1">
                                  This is the <em class="font-semibold text-foreground">tenth</em> item's tab body.
                                </p>
                              </div>
                            </div>
                            
                          </div>
                              <script src="../../assets/vendor/preline/dist/index.js"></script>
                            </body>
                          </html>

Destroy and reinitialize

Use the destroy method to remove Tabs behavior before reinitializing it.

<div class="mt-3">
                          <div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
                            <p class="text-muted-foreground-1">
                              This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                            </p>
                          </div>
                          <div id="tabs-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-2">
                            <p class="text-muted-foreground-1">
                              This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                            </p>
                          </div>
                          <div id="tabs-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-3">
                            <p class="text-muted-foreground-1">
                              This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                            </p>
                          </div>
                        </div>

<div class="flex flex-wrap gap-2 mt-8">
                          <button type="button" id="hs-destroy-tabs" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <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="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                            Destroy tabs
                          </button>
                          <button type="button" id="hs-auto-init-tabs" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                            <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="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                            Reinitialize tabs
                          </button>
                        </div>
                        
                            <script src="../../assets/vendor/preline/dist/index.js"></script>
                              <script>
                                window.addEventListener('load', () => {
                                  (function() {
                                    const tabs = document.querySelector('#hs-tabs');
                                    const destroy = document.querySelector('#hs-destroy-tabs');
                                    const autoInit = document.querySelector('#hs-auto-init-tabs');

destroy.addEventListener('click', () => {
                                      const {element} = HSTabs.getInstance(tabs, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                      autoInit.removeAttribute('disabled');
                                    });

autoInit.addEventListener('click', () => {
                                      HSTabs.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                      destroy.removeAttribute('disabled');
                                    });
                                  })();
                                });
                              </script>
                          </body>
                        </html>

<div class="mt-3">
                          <div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
                            <p class="text-muted-foreground-1">
                              This is the <em class="font-semibold text-foreground">first</em> item's tab body.
                            </p>
                          </div>
                          <div id="tabs-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-2">
                            <p class="text-muted-foreground-1">
                              This is the <em class="font-semibold text-foreground">second</em> item's tab body.
                            </p>
                          </div>
                          <div id="tabs-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-3">
                            <p class="text-muted-foreground-1">
                              This is the <em class="font-semibold text-foreground">third</em> item's tab body.
                            </p>
                          </div>
                        </div>

destroy.addEventListener('click', () => {
                                const {element} = HSTabs.getInstance(tabs, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                autoInit.removeAttribute('disabled');
                              });

autoInit.addEventListener('click', () => {
                                HSTabs.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                destroy.removeAttribute('disabled');
                              });
                            })();
                          });
                        </script>