tabs

tab 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem commodi quaerat eos, ipsum illo quos quibusdam consequuntur necessitatibus velit nostrum. 

<ul class="tabs__bar js-tabs">
    <li class="tabs__nav js-tabs-link is-active" data-control="#item1">TAB 1</li>
    <li class="tabs__nav js-tabs-link" data-control="#item2">TAB 2</li>
    <li class="tabs__nav js-tabs-link" data-control="#item3">TAB 3</li>
    <li class="tabs__nav js-tabs-link" data-control="#item4">TAB 4</li>
</ul>
<div class="tabs__content">
    <div class="tabs__item js-tabs-item is-active" id="item1">
        Item 1
    </div>
    <div class="tabs__item js-tabs-item" id="item2">
        Item 2
    </div>
    <div class="tabs__item js-tabs-item" id="item3">
        Item 3
    </div>
    <div class="tabs__item js-tabs-item" id="item4">
        Item 4
    </div>
</div>

tab 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem commodi quaerat eos, ipsum illo quos quibusdam consequuntur necessitatibus velit nostrum. 

<ul class="tabs__bar--justify js-tabs">
    <li class="tabs__nav js-tabs-link is-active" data-control="#justified1">TAB 1</li>
    <li class="tabs__nav js-tabs-link" data-control="#justified2">TAB 2</li>
    <li class="tabs__nav js-tabs-link" data-control="#justified3">TAB 3</li>
    <li class="tabs__nav js-tabs-link" data-control="#justified4">TAB 4</li>
</ul>
<div class="tabs__content">
    <div class="tabs__item js-tabs-item is-active" id="justified1">
        Item 1
    </div>
    <div class="tabs__item js-tabs-item" id="justified2">
        Item 2
    </div>
    <div class="tabs__item js-tabs-item" id="justified3">
        Item 3
    </div>
    <div class="tabs__item js-tabs-item" id="justified4">
        Item 4
    </div>
</div>

© 2021 Suitmedia