> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/tabs/tabs-3.md).

# Tabs #3

### Component Structure

* **TB3 COMPONENT (section)**: This serves as the primary container, styled with `.tb3__component`, ensuring that the tabs occupy the full viewport height and are centered within the view.
* **TB3 CONTAINER (container)**: Acts as the layout manager within the component, applying `.tb3__container` styling to organize content effectively.
* **TB3 TABS (tabs-nested)**: The core of the component, where the tab functionality is initialized, utilizing `.tb3__tabs` for the base styling.
* **TB3 MENU (block)**: Houses the tab menu items, facilitating navigation between tabs, marked with `.tb3__menu`.
  * **TB3 MENU ITEM (div)**: Individual tab selectors, each wrapped in `.tb3__menu-item`.
  * **TB3 MENU TEXT (text-basic)**: The text labels for each tab, carrying `.tb3__menu-text` styling.
* **TB3 CONTENT (block)**: The container for the content sections corresponding to each tab, adorned with `.tb3__content`.
  * **TB3 CONTENT INNER (block)**: Encloses the specific content for each tab, including images and text, highlighted with `.tb3__content-inner`.
  * **TB3 IMG (image)**: Visual elements within tab content, using `.tb3__img` to ensure proper display and scaling.
  * **TB3 CONTENT TITLE (heading)** and **TB3 CONTENT TEXT (div)**: Textual content for each tab, offering detailed information or descriptions, styled respectively with `.tb3__content-title` and `.tb3__content-text`.

### Animation Structure

* **TB3 - CONTENT TEXT**: Animates the content text scaling from 0 to 1, providing a smooth reveal effect for textual information within each tab.
* **TB3 - CONTENT TITLE**: Fade-in and positional animation for the content titles, enhancing the visual transition between tabs.
* **TB3 - CONTENT IMAGE**: Applies a clipping path animation to images within tabs, coupled with a slight rotation for a dynamic unveiling of visual content.

### Event Structure

* **TB3 - IMG**: An event-based trigger that restarts the defined animations (`TB3 - CONTENT IMAGE`, `TB3 - CONTENT TITLE`, and `TB3 - CONTENT TEXT`) upon tab selection, ensuring that each content reveal is accompanied by engaging animations for an immersive user experience.