Tab Style 2
<div class="tabs">
   <div class="single-tabs tabs-two">
      <ul class="nav nav-justified" id="myTab" role="tablist">
         <li class="nav-item">
            <a class="active" id="tab-two-one-tab" data-bs-toggle="tab" href="#tab-two-one" role="tab"
               aria-controls="tab-two-one" aria-selected="true">TAB 01</a>
         </li>
         <li class="nav-item">
            <a id="tab-two-two-tab" data-bs-toggle="tab" href="#tab-two-two" role="tab"
               aria-controls="tab-two-two" aria-selected="false">TAB 02</a>
         </li>
         <li class="nav-item">
            <a id="tab-two-three-tab" data-bs-toggle="tab" href="#tab-two-three" role="tab"
               aria-controls="tab-two-three" aria-selected="false">TAB 03</a>
         </li>
         <li class="nav-item">
            <a id="tab-two-four-tab" data-bs-toggle="tab" href="#tab-two-four" role="tab"
               aria-controls="tab-two-four" aria-selected="false">TAB 04</a>
         </li>
      </ul>
      <div class="tab-content" id="myTabContent">
         <div class="tab-pane fade show active" id="tab-two-one" role="tabpanel"
            aria-labelledby="tab-two-one-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-two-two" role="tabpanel" aria-labelledby="tab-two-two-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-two-three" role="tabpanel" aria-labelledby="tab-two-three-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-two-four" role="tabpanel" aria-labelledby="tab-two-four-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
      </div>
   </div>
   <!-- tabs two -->
</div>
/* tabs-two */
.tabs-two {
  border: 1px solid var(--gray-4);
}
@media (max-width: 767px) {
  .tabs-two .nav {
    display: block;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tabs-two .nav {
    display: flex;
  }
}
.tabs-two .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-3);
  font-weight: 700;
  padding: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: block;
  border-bottom: 1px solid var(--gray-4);
  position: relative;
}
.tabs-two .nav .nav-item a.active {
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid var(--gray-4);
  border-bottom: 0;
  border-top: 0;
}
@media (max-width: 767px) {
  .tabs-two .nav .nav-item a.active {
    border: 1px solid var(--gray-4);
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tabs-two .nav .nav-item a.active {
    border: 1px solid var(--gray-4);
    border-bottom: 0;
    border-top: 0;
  }
}
.tabs-two .nav .nav-item a.active::before {
  position: absolute;
  content: "";
  top: 0;
  width: 100%;
  height: 4px;
  left: 0;
  background: var(--primary);
}
.tabs-two .nav .nav-item:first-child a.active {
  border-left: 0;
}
.tabs-two .nav .nav-item:last-child a.active {
  border-right: 0;
}
.tabs-two .tab-content .tab-text {
  padding: 15px;
}
.tabs-two .tab-content .tab-text .text {
  color: var(--dark-3);
}
Tab Style 3
<div class="tabs">
   <div class="single-tabs tabs-three">
      <ul class="nav nav-justified" id="myTab" role="tablist">
         <li class="nav-item">
            <a class="active" id="tab-three-one-tab" data-bs-toggle="tab" href="#tab-three-one" role="tab"
               aria-controls="tab-three-one" aria-selected="true">
            <i class="lni lni-vector"></i> TAB 01</a>
         </li>
         <li class="nav-item">
            <a id="tab-two-three-tab" data-bs-toggle="tab" href="#tab-three-two" role="tab"
               aria-controls="tab-three-two" aria-selected="false">
            <i class="lni lni-pizza"></i> TAB 02</a>
         </li>
         <li class="nav-item">
            <a id="tab-three-three-tab" data-bs-toggle="tab" href="#tab-three-three" role="tab"
               aria-controls="tab-three-three" aria-selected="false">
            <i class="lni lni-invention"></i> TAB 03</a>
         </li>
         <li class="nav-item">
            <a id="tab-three-four-tab" data-bs-toggle="tab" href="#tab-three-four" role="tab"
               aria-controls="three-two-four" aria-selected="false">
            <i class="lni lni-dashboard"></i> TAB 04</a>
         </li>
      </ul>
      <div class="tab-content" id="myTabContent">
         <div class="tab-pane fade show active" id="tab-three-one" role="tabpanel"
            aria-labelledby="tab-three-one-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-three-two" role="tabpanel" aria-labelledby="tab-three-two-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-three-three" role="tabpanel" aria-labelledby="tab-three-three-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-three-four" role="tabpanel" aria-labelledby="tab-three-four-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
      </div>
   </div>
   <!-- tabs three -->
</div>
/* tabs-three */
@media (max-width: 767px) {
  .tabs-three .nav {
    display: block;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tabs-three .nav {
    display: flex;
  }
}
.tabs-three .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-3);
  font-weight: 700;
  padding: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
}
.tabs-three .nav .nav-item a i {
  margin-right: 5px;
  font-size: 18px;
}
.tabs-three .nav .nav-item a::before {
  position: absolute;
  content: "";
  background-color: var(--gray-4);
  width: 100%;
  height: 4px;
  left: 0;
  bottom: 0;
}
.tabs-three .nav .nav-item a.active {
  color: var(--primary);
  background: var(--primary-light);
}
.tabs-three .nav .nav-item a.active::before {
  background: var(--primary);
}
.tabs-three .tab-content .tab-text {
  padding: 15px;
}
.tabs-three .tab-content .tab-text .text {
  color: var(--dark-3);
}
Standard Tab
<div class="tabs">
   <div class="single-tabs tabs-one">
      <ul class="nav nav-justified" id="myTab" role="tablist">
         <li class="nav-item">
            <a class="active" id="tab-one-one-tab" data-bs-toggle="tab" href="#tab-one-one" role="tab"
               aria-controls="tab-one-one" aria-selected="true">TAB 01</a>
         </li>
         <li class="nav-item">
            <a id="tab-one-two-tab" data-bs-toggle="tab" href="#tab-one-two" role="tab"
               aria-controls="tab-one-two" aria-selected="false">TAB 02</a>
         </li>
         <li class="nav-item">
            <a id="tab-one-three-tab" data-bs-toggle="tab" href="#tab-one-three" role="tab"
               aria-controls="tab-one-three" aria-selected="false">TAB 03</a>
         </li>
         <li class="nav-item">
            <a id="tab-one-four-tab" data-bs-toggle="tab" href="#tab-one-four" role="tab"
               aria-controls="tab-one-four" aria-selected="false">TAB 04</a>
         </li>
      </ul>
      <div class="tab-content" id="myTabContent">
         <div class="tab-pane fade show active" id="tab-one-one" role="tabpanel"
            aria-labelledby="tab-one-one-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-one-two" role="tabpanel" aria-labelledby="tab-one-two-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-one-three" role="tabpanel" aria-labelledby="tab-one-three-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-one-four" role="tabpanel" aria-labelledby="tab-one-four-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
      </div>
   </div>
   <!-- tabs one -->
</div>
/* tabs-one */
.tabs-one {
  border: 1px solid var(--gray-4);
}
.tabs-one .nav {
  border-bottom: 1px solid var(--gray-4);
}
@media (max-width: 767px) {
  .tabs-one .nav {
    display: block;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tabs-one .nav {
    display: flex;
  }
}
.tabs-one .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-3);
  font-weight: 700;
  padding: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: block;
}
.tabs-one .nav .nav-item a.active {
  color: var(--white);
  background: var(--primary);
}
.tabs-one .tab-content .tab-text {
  padding: 15px;
}
.tabs-one .tab-content .tab-text .text {
  color: var(--dark-3);
}
Tab Style 5
<div class="tabs">
   <div class="single-tabs tabs-five">
      <div class="row no-gutters">
         <div class="col-sm-4">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
               <a class="active" id="v-pills-five-one-tab" data-bs-toggle="pill" href="#v-pills-five-one"
                  role="tab" aria-controls="v-pills-five-one" aria-selected="true"><i class="lni lni-vector"></i>
               TAB 01</a>
               <a id="v-pills-five-two-tab" data-bs-toggle="pill" href="#v-pills-five-two" role="tab"
                  aria-controls="v-pills-five-two" aria-selected="false"><i class="lni lni-pizza"></i> TAB 02</a>
               <a id="v-pills-five-three-tab" data-bs-toggle="pill" href="#v-pills-five-three" role="tab"
                  aria-controls="v-pills-five-three" aria-selected="false"><i class="lni lni-invention"></i> TAB
               03</a>
               <a id="v-pills-five-four-tab" data-bs-toggle="pill" href="#v-pills-five-four" role="tab"
                  aria-controls="v-pills-five-four" aria-selected="false"><i class="lni lni-dashboard"></i> TAB
               04</a>
            </div>
         </div>
         <div class="col-sm-8">
            <div class="tab-content" id="v-pills-tabContent">
               <div class="tab-pane fade show active" id="v-pills-five-one" role="tabpanel"
                  aria-labelledby="v-pills-five-one-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
               <div class="tab-pane fade" id="v-pills-five-two" role="tabpanel"
                  aria-labelledby="v-pills-five-two-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
               <div class="tab-pane fade" id="v-pills-five-three" role="tabpanel"
                  aria-labelledby="v-pills-five-three-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
               <div class="tab-pane fade" id="v-pills-five-four" role="tabpanel"
                  aria-labelledby="v-pills-five-four-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- row -->
   </div>
   <!-- tabs five -->
</div>
/* tabs-five */
.tabs-five {
  box-shadow: var(--shadow-4);
  border-radius: 4px;
}
.tabs-five .nav {
  height: 100%;
}
.tabs-five .nav a {
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-3);
  font-weight: 700;
  padding: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
  text-align: center;
  border-radius: 4px;
}
.tabs-five .nav a i {
  margin-right: 5px;
  font-size: 18px;
}
.tabs-five .nav a.active {
  color: var(--white);
  background: var(--primary);
}
.tabs-five .tab-content .tab-text {
  padding: 15px;
}
.tabs-five .tab-content .tab-text .text {
  color: var(--dark-3);
}
Tab Style 6
<div class="tabs">
   <div class="single-tabs tabs-six">
      <div class="row no-gutters">
         <div class="col-sm-4">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
               <a class="active" id="v-pills-six-one-tab" data-bs-toggle="pill" href="#v-pills-six-one" role="tab"
                  aria-controls="v-pills-six-one" aria-selected="true"><i class="lni lni-vector"></i> TAB 01</a>
               <a id="v-pills-six-two-tab" data-bs-toggle="pill" href="#v-pills-six-two" role="tab"
                  aria-controls="v-pills-six-two" aria-selected="false"><i class="lni lni-pizza"></i> TAB 02</a>
               <a id="v-pills-six-three-tab" data-bs-toggle="pill" href="#v-pills-six-three" role="tab"
                  aria-controls="v-pills-six-three" aria-selected="false"><i class="lni lni-invention"></i> TAB
               03</a>
               <a id="v-pills-six-four-tab" data-bs-toggle="pill" href="#v-pills-six-four" role="tab"
                  aria-controls="v-pills-six-four" aria-selected="false"><i class="lni lni-dashboard"></i> TAB
               04</a>
            </div>
         </div>
         <div class="col-sm-8">
            <div class="tab-content" id="v-pills-tabContent">
               <div class="tab-pane fade show active" id="v-pills-six-one" role="tabpanel"
                  aria-labelledby="v-pills-six-one-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
               <div class="tab-pane fade" id="v-pills-six-two" role="tabpanel"
                  aria-labelledby="v-pills-six-two-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
               <div class="tab-pane fade" id="v-pills-six-three" role="tabpanel"
                  aria-labelledby="v-pills-six-three-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
               <div class="tab-pane fade" id="v-pills-six-four" role="tabpanel"
                  aria-labelledby="v-pills-six-four-tab">
                  <div class="tab-text">
                     <p class="text">
                        Raw denim you probably haven’t heard of them jean
                        shorts Austin. Nesciunt tofu stumptown aliqua, retro
                        synth master cleanse. Mustache cliche tempor,
                        williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh dreamcatcher synth.
                        <br /><br />
                        Cosby sweater eu banh mi, qui irure terry richardson
                        ex squid. Aliquip placeat salvia cillum iphone.
                        Seitan aliquip quis cardigan american apparel,
                        butcher voluptate nisi qui.
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- row -->
   </div>
   <!-- tabs six -->
</div>
/* tabs-six */
.tabs-six {
  border: 1px solid var(--gray-4);
}
.tabs-six .nav {
  height: 100%;
  position: relative;
}
.tabs-six .nav::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 100%;
  background-color: var(--gray-4);
  top: 0;
  right: 0;
}
.tabs-six .nav a {
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-3);
  font-weight: 700;
  padding: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
  text-align: center;
}
.tabs-six .nav a i {
  margin-right: 5px;
  font-size: 18px;
}
.tabs-six .nav a.active {
  color: var(--primary);
  background: var(--primary-light);
}
.tabs-six .nav a.active::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 100%;
  background: var(--primary);
  top: 0;
  right: 0;
}
.tabs-six .tab-content .tab-text {
  padding: 15px;
}
.tabs-six .tab-content .tab-text .text {
  color: var(--dark-3);
}
Tab Style 4
<div class="tabs">
   <div class="single-tabs tabs-four">
      <ul class="nav nav-justified" id="myTab" role="tablist">
         <li class="nav-item">
            <a class="active" id="tab-four-one-tab" data-bs-toggle="tab" href="#tab-four-one" role="tab"
               aria-controls="tab-four-one" aria-selected="true">
            <i class="lni lni-vector"></i> TAB 01</a>
         </li>
         <li class="nav-item">
            <a id="tab-four-two-tab" data-bs-toggle="tab" href="#tab-four-two" role="tab"
               aria-controls="tab-four-two" aria-selected="false">
            <i class="lni lni-pizza"></i> TAB 02</a>
         </li>
         <li class="nav-item">
            <a id="tab-four-three-tab" data-bs-toggle="tab" href="#tab-four-three" role="tab"
               aria-controls="tab-four-three" aria-selected="false">
            <i class="lni lni-invention"></i> TAB 03</a>
         </li>
         <li class="nav-item">
            <a id="tab-four-four-tab" data-bs-toggle="tab" href="#tab-four-four" role="tab"
               aria-controls="three-four-four" aria-selected="false">
            <i class="lni lni-dashboard"></i> TAB 04</a>
         </li>
      </ul>
      <div class="tab-content" id="myTabContent">
         <div class="tab-pane fade show active" id="tab-four-one" role="tabpanel"
            aria-labelledby="tab-four-one-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-four-two" role="tabpanel" aria-labelledby="tab-four-two-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-four-three" role="tabpanel" aria-labelledby="tab-four-three-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
         <div class="tab-pane fade" id="tab-four-four" role="tabpanel" aria-labelledby="tab-four-four-tab">
            <div class="tab-text">
               <p class="text">
                  Raw denim you probably haven’t heard of them jean shorts
                  Austin. Nesciunt tofu stumptown aliqua, retro synth
                  master cleanse. Mustache cliche tempor, williamsburg
                  carles vegan helvetica. Reprehenderit butcher retro
                  keffiyeh dreamcatcher synth. <br /><br />
                  Cosby sweater eu banh mi, qui irure terry richardson ex
                  squid. Aliquip placeat salvia cillum iphone. Seitan
                  aliquip quis cardigan american apparel, butcher
                  voluptate nisi qui.
               </p>
            </div>
         </div>
      </div>
   </div>
   <!-- tabs four -->
</div>
/* tabs-four */
@media (max-width: 767px) {
  .tabs-four .nav {
    display: block;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tabs-four .nav {
    display: flex;
  }
}
.tabs-four .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-3);
  font-weight: 700;
  padding: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
}
@media (max-width: 767px) {
  .tabs-four .nav .nav-item a {
    margin-top: -4px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tabs-four .nav .nav-item a {
    margin-top: 0;
  }
}
.tabs-four .nav .nav-item a i {
  margin-right: 5px;
  font-size: 18px;
}
.tabs-four .nav .nav-item a::before {
  position: absolute;
  content: "";
  background-color: var(--gray-4);
  width: 100%;
  height: 4px;
  left: 0;
  bottom: 0;
}
.tabs-four .nav .nav-item a.active {
  color: var(--white);
  background: var(--primary);
}
.tabs-four .nav .nav-item a.active::before {
  background: var(--primary);
}
.tabs-four .tab-content .tab-text {
  padding: 15px;
}
.tabs-four .tab-content .tab-text .text {
  color: var(--dark-3);
}