You can utilize any of the Navs examples to make tabs.
<!-- Start Nav -->
<ul class="nav horizontal-pills-tab nav-pills rounded-top border px-3 py-2" 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 border p-3 rounded-bottom">
<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>
<!-- Start Nav -->
<div class="text-center">
<ul class="nav horizontal-pills-tab nav-pills rounded-10 px-2 py-2 d-inline-flex" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-one-eg1-tab" href="#nav-one-eg2" data-bs-toggle="pill" 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-eg2" data-bs-toggle="pill" 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-eg2" data-bs-toggle="pill" role="tab" aria-controls="nav-three-eg1" aria-selected="false">Tab Three</a>
</li>
</ul>
</div>
<!-- End Nav -->
<!-- Tab Content -->
<div class="tab-content mt-3">
<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>
<!-- Nav -->
<div class="text-center">
<ul class="nav nav-pills justify-content-center horizontal-pills-tab d-inline-flex p-2 rounded-10" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-one-eg2-tab" href="#nav-one-eg3" data-bs-toggle="pill" role="tab" aria-controls="nav-one-eg2" aria-selected="true">
<div class="d-flex align-items-center">
<i class="bi-house me-2"></i> Tab one
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-two-eg2-tab" href="#nav-two-eg3" data-bs-toggle="pill" role="tab" aria-controls="nav-two-eg2" aria-selected="false">
<div class="d-flex align-items-center">
<i class="bi-person me-2"></i> Tab two
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-three-eg2-tab" href="#nav-three-eg3" data-bs-toggle="pill" role="tab" aria-controls="nav-three-eg2" aria-selected="false">
<div class="d-flex align-items-center">
<i class="bi-gear me-2"></i> Tab three
</div>
</a>
</li>
</ul>
</div>
<!-- End Nav -->
<!-- Tab Content -->
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="nav-one-eg3" role="tabpanel" aria-labelledby="nav-one-eg2-tab">
<p>First tab content...</p>
</div>
<div class="tab-pane fade" id="nav-two-eg3" role="tabpanel" aria-labelledby="nav-two-eg2-tab">
<p>Second tab content...</p>
</div>
<div class="tab-pane fade" id="nav-three-eg3" role="tabpanel" aria-labelledby="nav-three-eg2-tab">
<p>Third tab content...</p>
</div>
</div>
<!-- End Tab Content -->