<div class="container demo-container">
<ul class="nav nav-tabs" data-bs-tabs="tabs"> 
 
<li class="nav-item"><a class="nav-link active" aria-current="true" data-bs-toggle="tab" href="#tab-01"><span>Headphones</span></a></li>
   
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-02"><span>Keyboards</span></a></li> 

<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-03"><span>Phones</span></a></li>

</ul>

<div class="tab-content">
<div class="tab-pane active" id="tab-01">
<div class="tab-content">Wearing headphones for just an hour could increase the bacteria in your ears by 700 times.</div>
</div> 

<div class="tab-pane" id="tab-02">
<div class="tab-content">Research from the Swinburne University of Technology in Australia found that keyboards can have high levels of bacteria on them.</div>
</div> 

<div class="tab-pane" id="tab-03">
<div class="tab-content">Scientists at the University of Arizona found that your phone is ten times dirtier than most toilet seats.</div>
</div>

</div>
</div>

.demo-section .tab-pane {
  border: 1px solid #DFE2E6;
  background-color: rgba(255,255,255,0.80);
  padding: 40px 30px;
  border-top: transparent;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.demo-section .nav-tabs .nav-item .nav-link {
  background-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.40);
  margin-right: 2px;
  padding-top: 4px;
  padding-bottom: 0;
}

.demo-section .nav-tabs .nav-item .nav-link.active {
  background-color: rgba(255,255,255,0.80);
  color: rgba(0,0,0,0.90);
  border-bottom: transparent;
  border-top-left-radius: 10px;
}

.demo-section .nav-tabs .nav-item .nav-link.active span {
  display: inline-block;
  border-bottom: 2px solid rgba(255,166,0,1.00);
  padding-top: 4px;
  padding-bottom: 4px;
}

.demo-section .nav-link.active {
  border-bottom: transparent !important; 
  border: 1px solid #DFE2E6;
}

.demo-section .nav-tabs .nav-item .nav-link:not(.active) {
  padding-top: 8px;
  padding-bottom: 4px;
}

.demo-section .nav-tabs .nav-item .nav-link.active {
  background-color: rgba(255,255,255,0.80);
  color: rgba(0,0,0,0.90);
  border-bottom: transparent;
  border-top-left-radius: 10px;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center 34px;
}