Tab

                       
    <div class="tabs-style-1">
        <ul class="nav" role="tablist">
            <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#Tab-1" role="tab" aria-selected="true">TAB 1</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-2" role="tab" aria-selected="false">TAB 2</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-3" role="tab" aria-selected="false">TAB 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-4" role="tab" aria-selected="false">TAB 4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-5" role="tab" aria-selected="false">TAB 5</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="Tab-1" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu    
            </div>
            <div class="tab-pane fade" id="Tab-2" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu    
            </div>
            <div class="tab-pane fade" id="Tab-3" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu    
            </div>
            <div class="tab-pane fade" id="Tab-4" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu    
            </div>
            <div class="tab-pane fade" id="Tab-5" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu    
            </div>
        </div>
    </div>
                       
                       Copy to clipboard
                   

                       
    <div class="tabs-style-2">
        <ul class="nav" role="tablist">
            <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#Tab-2-1" role="tab" aria-selected="true">Tab 1</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-2-2" role="tab" aria-selected="false">Tab 2</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-2-3" role="tab" aria-selected="false">Tab 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-2-4" role="tab" aria-selected="false">Tab 4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-2-5" role="tab" aria-selected="false">Tab 5</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="Tab-2-1" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-2-2" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu   
            </div>
            <div class="tab-pane fade" id="Tab-2-3" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-2-4" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu    
            </div>
            <div class="tab-pane fade" id="Tab-2-5" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu    
            </div>
        </div>
    </div>
                       
                       Copy to clipboard
                   

                       
    <div class="tabs-style-3">
        <ul class="nav" role="tablist">
            <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#Tab-3-1" role="tab" aria-selected="true">TAB 1</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-3-2" role="tab" aria-selected="false">TAB 2</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-3-3" role="tab" aria-selected="false">TAB 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-3-4" role="tab" aria-selected="false">TAB 4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-3-5" role="tab" aria-selected="false">TAB 5</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="Tab-3-1" role="tabpanel">
            Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-3-2" role="tabpanel">
            Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-3-3" role="tabpanel">
            Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-3-4" role="tabpanel">
            Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-3-5" role="tabpanel">
            Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
        </div>
    </div>
                       
                       Copy to clipboard
                   

                       
    <div class="tabs-style-4">
        <ul class="nav" role="tablist">
            <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#Tab-4-1" role="tab" aria-selected="true">TAB 1</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-4-2" role="tab" aria-selected="false">TAB 2</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-4-3" role="tab" aria-selected="false">TAB 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-4-4" role="tab" aria-selected="false">TAB 4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#Tab-4-5" role="tab" aria-selected="false">TAB 5</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="Tab-4-1" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-4-2" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-4-3" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-4-4" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
            <div class="tab-pane fade" id="Tab-4-5" role="tabpanel">
                Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hend rerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In acdui quis mi consectetuer lacinia. Nam pretium turpis et arcu
            </div>
        </div>
    </div>
                       
                       Copy to clipboard