<!-- Default Tab -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
    <a class="nav-link active" href="#tab-1" data-bs-toggle="tab" role="tab">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-2" data-bs-toggle="tab" role="tab">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-3" data-bs-toggle="tab" role="tab">Contact</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-1" role="tabpanel">
    <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-2" role="tabpanel">
    <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-3" role="tabpanel">
    <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
</div>

<!-- Color Tab -->
<ul class="nav nav-pills nav-color mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
    <a class="nav-link active" href="#tab-4" data-bs-toggle="tab" role="tab">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-5" data-bs-toggle="tab" role="tab">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-6" data-bs-toggle="tab" role="tab">Contact</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-4" role="tabpanel">
    <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-5" role="tabpanel">
    <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-6" role="tabpanel">
    <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
</div>

<!-- Classic Tab -->
<ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
    <a class="nav-link active" href="#tab-7" data-bs-toggle="tab" role="tab">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-8" data-bs-toggle="tab" role="tab">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-9" data-bs-toggle="tab" role="tab">Contact</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-7" role="tabpanel">
    <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-8" role="tabpanel">
    <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-9" role="tabpanel">
    <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
</div>

<!-- Classic Tab with Icon -->
<ul class="nav nav-tabs nav-classic-icon" id="pills-tab" role="tablist">
<li class="nav-item">
    <a class="nav-link active" href="#tab-10" data-bs-toggle="tab" role="tab"><i class="bi bi-star"></i> Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-11" data-bs-toggle="tab" role="tab"><i class="bi bi-clock-history"></i> Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-12" data-bs-toggle="tab" role="tab"><i class="bi bi-gear-fill"></i> Settings</a>
</li>
</ul>
<div class="tab-content nav-classic-icon">
<div class="tab-pane fade show active" id="tab-10" role="tabpanel">
    <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-11" role="tabpanel">
    <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-12" role="tabpanel">
    <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
</div>

<!-- Tab Cool -->
<ul class="nav nav-tabs nav-cool mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
    <a class="nav-link active" href="#tab-13" data-bs-toggle="tab" role="tab">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-14" data-bs-toggle="tab" role="tab">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-15" data-bs-toggle="tab" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-13" role="tabpanel">
    <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-14" role="tabpanel">
    <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-15" role="tabpanel">
    <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
</div>

<!-- Tab Capsule -->
<ul class="nav nav-tabs nav-capsule mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
    <a class="nav-link active" href="#tab-16" data-bs-toggle="tab" role="tab">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-17" data-bs-toggle="tab" role="tab">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-18" data-bs-toggle="tab" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-16" role="tabpanel">
    <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-17" role="tabpanel">
    <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-18" role="tabpanel">
    <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
</div>

<!-- Tab Cool BG -->
<ul class="nav nav-tabs nav-cool-bg mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
    <a class="nav-link active" href="#tab-19" data-bs-toggle="tab" role="tab">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-20" data-bs-toggle="tab" role="tab">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#tab-21" data-bs-toggle="tab" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-19" role="tabpanel">
    <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-20" role="tabpanel">
    <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
<div class="tab-pane fade" id="tab-21" role="tabpanel">
    <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit</p>
</div>
</div>

<!-- Tab Vertical -->
<div class="d-flex align-items-start">
<ul class="nav nav-pills nav-vertical" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#tab-22" data-bs-toggle="tab" role="tab">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-23" data-bs-toggle="tab" role="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-24" data-bs-toggle="tab" role="tab">Settings</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="tab-22" role="tabpanel">
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. </p>
    </div>
    <div class="tab-pane fade" id="tab-23" role="tabpanel">
        <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet.</p>
    </div>
    <div class="tab-pane fade" id="tab-24" role="tabpanel">
        <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet.</p>
    </div>
</div>
</div>

<!-- Tab Vertical with Icon -->
<div class="d-flex align-items-start">
<ul class="nav nav-pills nav-vertical-icon" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#tab-25" data-bs-toggle="tab" role="tab"><i class="bi bi-star me-1"></i> Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-26" data-bs-toggle="tab" role="tab"><i class="bi bi-clock-history me-1"></i> Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-27" data-bs-toggle="tab" role="tab"><i class="bi bi-gear-fill me-1"></i> Settings</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="tab-25" role="tabpanel">
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. </p>
    </div>
    <div class="tab-pane fade" id="tab-26" role="tabpanel">
        <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet.</p>
    </div>
    <div class="tab-pane fade" id="tab-27" role="tabpanel">
        <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet.</p>
    </div>
</div>
</div>

<!-- Tab Vertical Box -->
<div class="d-flex align-items-start">
<ul class="nav nav-pills nav-vertical-box" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#tab-28" data-bs-toggle="tab" role="tab">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-29" data-bs-toggle="tab" role="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-30" data-bs-toggle="tab" role="tab">Settings</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="tab-28" role="tabpanel">
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet.</p>
    </div>
    <div class="tab-pane fade" id="tab-29" role="tabpanel">
        <p class="text-muted">Enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet.</p>
    </div>
    <div class="tab-pane fade" id="tab-30" role="tabpanel">
        <p class="text-muted">Ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit, sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet.</p>
    </div>
</div>
</div>

<!-- Tab Vertical with Icon Box -->
<div class="d-flex align-items-start">
<ul class="nav nav-pills nav-vertical-icon-box" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#tab-31" data-bs-toggle="tab" role="tab"><div class="d-flex flex-column text-center"><span><i class="bi bi-star"></i></span> <span>Home</span></div></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-32" data-bs-toggle="tab" role="tab"><div class="d-flex flex-column text-center"><span><i class="bi bi-clock-history"></i></span> <span>Profile</span></div></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-33" data-bs-toggle="tab" role="tab"><div class="d-flex flex-column text-center"><span><i class="bi bi-gear-fill"></i></span> <span>Settings</span></div></a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="tab-31" role="tabpanel">
        <h5 class="mb-4">Heading Here</h5>
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit</p>
        <p class="text-muted">Sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit.</p>
    </div>
    <div class="tab-pane fade" id="tab-32" role="tabpanel">
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit</p>
        <p class="text-muted">Sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit.</p>
    </div>
    <div class="tab-pane fade" id="tab-33" role="tabpanel">
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit</p>
        <p class="text-muted">Sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit.</p>
    </div>
</div>
</div>

<!-- Tab Media: Icon -->
<div class="d-flex align-items-start">
<ul class="nav nav-tabs nav-media pe-5 me-6" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#tab-34" data-bs-toggle="tab" role="tab">
            <div class="d-flex align-items-center">
                <div class="tab-media-icon"><i class="bi bi-cart3"></i></div>
                <div class="ps-3">
                    <div class="tab-media-subtitle mb-1">Step 1</div>
                    <h6 class="tab-media-title text-nowrap mb-0">Shopping cart</h6>
                </div>
            </div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-35" data-bs-toggle="tab" role="tab">
            <div class="d-flex align-items-center">
                <div class="tab-media-icon"><i class="bi bi-bag-check"></i></div>
                <div class="ps-3">
                    <div class="tab-media-subtitle mb-1">Step 2</div>
                    <h6 class="tab-media-title text-nowrap mb-0">Checkout</h6>
                </div>
            </div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#tab-36" data-bs-toggle="tab" role="tab">
            <div class="d-flex align-items-center">
                <div class="tab-media-icon"><i class="bi bi-credit-card"></i></div>
                <div class="ps-3">
                    <div class="tab-media-subtitle mb-1">Step 3</div>
                    <h6 class="tab-media-title text-nowrap mb-0">Payment Method</h6>
                </div>
            </div>
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="tab-34" role="tabpanel">
        <h5 class="mb-4">Heading Here</h5>
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit</p>
        <p class="text-muted">Sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit.</p>
    </div>
    <div class="tab-pane fade" id="tab-35" role="tabpanel">
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit</p>
        <p class="text-muted">Sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit.</p>
    </div>
    <div class="tab-pane fade" id="tab-36" role="tabpanel">
        <p class="text-muted">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit</p>
        <p class="text-muted">Sed magni dolore squi ratione voluptatem sequi nesciunt. 
            Neque porro quisquam qui dolorem ipsum quia dolor sit amet. Nemo enim ipsam voluptatem quia voluptas 
            sit aspernatur odit aut fugit.</p>
    </div>
</div>
</div>