Bootstrap Tabs

Wearing headphones for just an hour could increase the bacteria in your ears by 700 times.

Research from the Swinburne University of Technology in Australia found that keyboards can have high levels of bacteria on them.

Scientists at the University of Arizona found that your phone is ten times dirtier than most toilet seats.

Bootstrap Tabs are a component that segregates content into different panes, each viewable one at a time. Here is an example with customized CSS styles:

HTML

<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>

CSS

.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;
}