Source: https://tailwindcss.com/plus/ui-blocks/documentation/tabs

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Getting started

  • Getting set up

  • Using HTML

  • Using React

  • Using Vue

  • Assets

• Elements

  • Introduction

  • Autocomplete

  • Command palette

  • Dialog

  • Disclosure

  • Dropdown menu

  • Popover

  • Select

  • Tabs

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Tabs

A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.

The <el-tab-group> component makes it easy to build accessible, keyboard-navigable tab interfaces with full control over styling and layout.

Component API

<el-tab-group>

The main container that coordinates the tabs and panels.

| | | | --- | --- | | Methods | | | setActiveTab(index) | Sets the active tab by index. |

<el-tab-list>

The container for tab buttons.

<el-tab-panels>

The container for tab panels. All direct children are considered panels.

Examples

Basic example

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Setting the active tab

To view the complete documentation, you must own a Tailwind Plus license and be signed in .