Tab

        
          <!-- Nav -->
          <ul class="nav nav-segment nav-pills mb-7" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="nav-one-eg1-tab" href="#nav-one-eg1" data-bs-toggle="pill" data-bs-target="#nav-one-eg1" role="tab" aria-controls="nav-one-eg1" aria-selected="true">Tab One</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="nav-two-eg1-tab" href="#nav-two-eg1" data-bs-toggle="pill" data-bs-target="#nav-two-eg1" role="tab" aria-controls="nav-two-eg1" aria-selected="false">Tab two</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="nav-three-eg1-tab" href="#nav-three-eg1" data-bs-toggle="pill" data-bs-target="#nav-three-eg1" role="tab" aria-controls="nav-three-eg1" aria-selected="false">Tab Three</a>
            </li>
          </ul>
          <!-- End Nav -->

          <!-- Tab Content -->
          <div class="tab-content">
            <div class="tab-pane fade show active" id="nav-one-eg1" role="tabpanel" aria-labelledby="nav-one-eg1-tab">
              <p>First tab content...</p>
            </div>

            <div class="tab-pane fade" id="nav-two-eg1" role="tabpanel" aria-labelledby="nav-two-eg1-tab">
              <p>Second tab content...</p>
            </div>

            <div class="tab-pane fade" id="nav-three-eg1" role="tabpanel" aria-labelledby="nav-three-eg1-tab">
              <p>Third tab content...</p>
            </div>
          </div>
          <!-- End Tab Content -->
        
      

        
          <!-- Nav -->
          <ul class="nav nav-pills justify-content-left mb-7" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="nav-one-eg2-tab" href="#nav-one-eg2" data-bs-toggle="pill" data-bs-target="#nav-one-eg2" role="tab" aria-controls="nav-one-eg2" aria-selected="true">
                <div class="d-flex align-items-center">
                  <i class="bi-house"></i> Tab one
                </div>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="nav-two-eg2-tab" href="#nav-two-eg2" data-bs-toggle="pill" data-bs-target="#nav-two-eg2" role="tab" aria-controls="nav-two-eg2" aria-selected="false">
                <div class="d-flex align-items-center">
                  <i class="bi-person"></i> Tab two
                </div>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="nav-three-eg2-tab" href="#nav-three-eg2" data-bs-toggle="pill" data-bs-target="#nav-three-eg2" role="tab" aria-controls="nav-three-eg2" aria-selected="false">
                <div class="d-flex align-items-center">
                  <i class="bi-gear"></i> Tab three
                </div>
              </a>
            </li>
          </ul>
          <!-- End Nav -->

          <!-- Tab Content -->
          <div class="tab-content">
            <div class="tab-pane fade show active" id="nav-one-eg2" role="tabpanel" aria-labelledby="nav-one-eg2-tab">
              <p>First tab content...</p>
            </div>

            <div class="tab-pane fade" id="nav-two-eg2" role="tabpanel" aria-labelledby="nav-two-eg2-tab">
              <p>Second tab content...</p>
            </div>

            <div class="tab-pane fade" id="nav-three-eg2" role="tabpanel" aria-labelledby="nav-three-eg2-tab">
              <p>Third tab content...</p>
            </div>
          </div>
          <!-- End Tab Content -->