Tabs

   
   
<div>
   <div class="card">
   <div class="card-body">
      <h5 class="card-title">Horizontal Tabs</h5>
      <!-- Bordered Tabs -->
      <ul class="nav nav-tabs nav-tabs-bordered text-center" id="borderedTab-1" role="tablist">
         <li class="nav-item" role="presentation">
            <button class="nav-link active" id="profile-tab-11" data-bs-toggle="tab" data-bs-target="#bordered-profile-11" type="button" role="tab" aria-controls="profile" aria-selected="true" tabindex="-1"> <i class="bi bi-person-fill custom-icon"></i> Vaadin tab</button>
         </li>
         <li class="nav-item" role="presentation">
            <button class="nav-link" id="profile-tab-12" data-bs-toggle="tab" data-bs-target="#bordered-profile-12" type="button" role="tab" aria-controls="profile" aria-selected="false" tabindex="-1"> <i class="bi bi-person-fill custom-icon"></i> Vaadin tab</button>
         </li>
         <li class="nav-item" role="presentation">
            <button class="nav-link" id="profile-tab-13" data-bs-toggle="tab" data-bs-target="#bordered-profile-13" type="button" role="tab" aria-controls="profile" aria-selected="false" tabindex="-1"> <i class="bi bi-person-fill custom-icon"></i> Vaadin tab</button>
         </li>
         <li class="nav-item" role="presentation">
            <button class="nav-link pt-32" id="profile-tab-14" data-bs-toggle="tab" data-bs-target="#bordered-profile-14" type="button" role="tab" aria-controls="profile" aria-selected="false" tabindex="-1">  Vaadin tab</button>
         </li>
         <li class="nav-item" role="presentation">
            <button class="nav-link" id="profile-tab-15" data-bs-toggle="tab" data-bs-target="#bordered-profile-15" type="button" role="tab" aria-controls="profile" aria-selected="false" tabindex="-1"> <i class="bi bi-person-fill custom-icon"></i> Vaadin tab</button>
         </li>
      </ul>
      <!-- End Bordered Tabs -->
   </div>
</div>

<div class="card">
   <div class="card-body">
     <h5 class="card-title">Vertical Tabs</h5>

     <!-- Vertical Pills Tabs -->
     <div class="d-flex align-items-start">
       <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
         <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Vaadin tab</button>
         <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false" tabindex="-1">Vaadin tab</button>
         <button class="nav-link active" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="true"><i class="bi bi-person-fill px-2"></i> Vaadin tab</button>
         <button class="nav-link" id="v-pills-messages-tabs" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false" tabindex="-1"><i class="bi bi-person-fill px-2"></i> Vaadin tab</button>

       </div>
   
     </div>
     <!-- End Vertical Pills Tabs -->

   </div>
 </div>

 
</div>
       
              

   
   
      .nav-tabs {
         font-size: 14px;
         font-weight: 600;
     }
     
     .nav-tabs-bordered {
         border-bottom: 2px solid #ebeef4;
     }
     .text-center {
         text-align: center!important;
     }
     .nav-tabs {
         --bs-nav-tabs-border-width: 1px;
         --bs-nav-tabs-border-color: #dee2e6;
         --bs-nav-tabs-border-radius: 0.375rem;
         --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
         --bs-nav-tabs-link-active-color: #495057;
         --bs-nav-tabs-link-active-bg: #fff;
         --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
         border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
     }
     .nav {
         --bs-nav-link-padding-x: 1rem;
         --bs-nav-link-padding-y: 0.5rem;
         --bs-nav-link-font-weight: ;
         --bs-nav-link-color: var(--bs-link-color);
         --bs-nav-link-hover-color: var(--bs-link-hover-color);
         --bs-nav-link-disabled-color: #6c757d;
         display: flex;
         flex-wrap: wrap;
         padding-left: 0;
         margin-bottom: 0;
         list-style: none;
     }
     
     .nav-tabs-bordered .nav-link.active {
         background-color: #fff;
         color: #167DF5;
         border-bottom: 2px solid #167DF5;
     }
     .custom-icon {
         display: flex;
         justify-content: center;
         margin-bottom: 10px;
     }
     .align-items-start {
         align-items: flex-start!important;
     }
     .d-flex {
         display: flex!important;
     }
        .nav-pills {
         --bs-nav-pills-border-radius: 0.375rem;
         --bs-nav-pills-link-active-color: #fff;
         --bs-nav-pills-link-active-bg: #0d6efd;
     }
     
     .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
         color: #167df5;
         background-color: #ffffff;
         border-left: 2px solid #167df5;
         border-radius: inherit;
     }