Tabs allow users to navigate between different sections of content without leaving the page. They are commonly used in dashboards, settings panels, and multi-section interfaces.

Vertical Tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<section class="tab-container">
    <div class="container">
        <div class="tabs position--relative vertical">
            <div class="tabs--menu">
                <label class="tabs--menu-label para--one position--relative active">
                    Tab One
                </label>
                <label class="tabs--menu-label para--one position--relative">
                    Tab Two
                </label>
                <label class="tabs--menu-label para--one position--relative">
                    Tab Three
                </label>
                <label class="tabs--menu-label para--one position--relative">
                    Tab Four
                </label>
                <label class="tabs--menu-label para--one position--relative">
                    Tab Five
                </label>
            </div>
            <div class="tabs--content border-radius-lg">
                <div class="tabs--content-item active">
                    <div class="accordion">
                        <div class="accordion__tab"><button class="accordion__tab--label" id="tab1" tabindex="0">Accordion One Heading</button>
                            <div class="accordion__tab--content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                    ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion">
                        <div class="accordion__tab"><button class="accordion__tab--label active" id="tab2" tabindex="1">
                            Accordion Two Heading
                        </button>
                            <div class="accordion__tab--content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                    ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion">
                        <div class="accordion__tab"><button class="accordion__tab--label" id="tab3" tabindex="2">Accordion Three Heading</button>
                            <div class="accordion__tab--content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                    ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tabs--content-item">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                </div>
                <div class="tabs--content-item">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                </div>
                <div class="tabs--content-item">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                </div>
                <div class="tabs--content-item">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  
                </div>
            </div>
        </div>
    </div>
</section>