roolith css framework

Tab

Tab one
Tab two
Tab three

Tab one content with lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsa quibusdam quam quae doloremque optio eius asperiores corrupti consequuntur, sapiente pariatur repellendus aliquid praesentium facilis, vitae nam alias accusantium hic!

Tab two content with lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsa quibusdam quam quae doloremque optio eius asperiores corrupti consequuntur, sapiente pariatur repellendus aliquid praesentium facilis, vitae nam alias accusantium hic! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita eum nam veniam magni vel deleniti cupiditate. Quibusdam architecto, dolorem. Dolore dolores consequatur impedit, tempore dolor ducimus libero commodi possimus.

Tab three content with lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsa quibusdam quam quae doloremque optio eius asperiores corrupti consequuntur, sapiente pariatur repellendus aliquid praesentium facilis, vitae nam alias accusantium hic!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, aspernatur porro reprehenderit incidunt tempore totam deserunt quia quam, et praesentium amet mollitia facere numquam quaerat hic perspiciatis officia saepe ad.

<div class="tab">
    <ul class="tab-list">
        <li class="tab-title active" data-tab="#tab13">Tab one</li>
        <li class="tab-title" data-tab="#tab23">Tab two</li>
        <li class="tab-title" data-tab="#tab33">Tab three</li>
    </ul>

    <div class="tab-content active" id="tab13">
        <p>Tab one content with lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsa quibusdam quam quae doloremque optio eius asperiores corrupti consequuntur, sapiente pariatur repellendus aliquid praesentium facilis, vitae nam alias accusantium hic!</p>
    </div>

    <div class="tab-content" id="tab23">
        <p>Tab two content with lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsa quibusdam quam quae doloremque optio eius asperiores corrupti consequuntur, sapiente pariatur repellendus aliquid praesentium facilis, vitae nam alias accusantium hic! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita eum nam veniam magni vel deleniti cupiditate. Quibusdam architecto, dolorem. Dolore dolores consequatur impedit, tempore dolor ducimus libero commodi possimus.</p>
    </div>

    <div class="tab-content" id="tab33">
        <p>Tab three content with lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsa quibusdam quam quae doloremque optio eius asperiores corrupti consequuntur, sapiente pariatur repellendus aliquid praesentium facilis, vitae nam alias accusantium hic!</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, aspernatur porro reprehenderit incidunt tempore totam deserunt quia quam, et praesentium amet mollitia facere numquam quaerat hic perspiciatis officia saepe ad.</p>
    </div>
</div>

With help of JavaScript you can make it work. Example jQuery code

$('.tab-title').click(function(event) {
    let tabContent = $(this).attr('data-tab');

    if($(tabContent).length > 0) {
        $(tabContent).closest('.tab').find('.tab-content').removeClass('active');

        $(tabContent).addClass('active');

        $(this).closest('.tab-list').find('.tab-title').removeClass('active');
        $(this).addClass('active');
    }
});

Here is tab items in fluid style

Tab one
Tab two
Tab three

<ul class="tab-list tab-list-fluid"></ul>

If you want to make tab item's aligment center

Tab one
Tab two
Tab three

<ul class="tab-list tab-list-center"></ul>

SASS

Reference from _tab.scss

$tab-active-color: map-get($colors, primary);
$tab-border-color: lighten(map-get($colors, dark), 80%);