<h5 class="py-4 my-6">Tabs</h5>

<div class="row g-6">
  <div class="col-xl-6">
    <div class="nav-align-top">
      <ul class="nav nav-pills mb-4" role="tablist">
        <li class="nav-item">
          <button class="nav-link active"
                  data-bs-toggle="tab"
                  data-bs-target="#navs-pills-top-home">
            Home
          </button>
        </li>
        <li class="nav-item">
          <button class="nav-link"
                  data-bs-toggle="tab"
                  data-bs-target="#navs-pills-top-profile">
            Profile
          </button>
        </li>
        <li class="nav-item">
          <button class="nav-link"
                  data-bs-toggle="tab"
                  data-bs-target="#navs-pills-top-messages">
            Messages
          </button>
        </li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane fade show active" id="navs-pills-top-home">
          <p>Home tab content...</p>
        </div>
        <div class="tab-pane fade" id="navs-pills-top-profile">
          <p>Profile tab content...</p>
        </div>
        <div class="tab-pane fade" id="navs-pills-top-messages">
          <p>Messages tab content...</p>
        </div>
      </div>
    </div>
  </div>
</div>