Tabs

Tabs com bordas

Preview

HTML

<div class="tabs">
   <input type="radio" name="tab-list" id="tab-input-1" checked/>
   <input type="radio" name="tab-list" id="tab-input-2"/>
   <input type="radio" name="tab-list" id="tab-input-3"/>
   <input type="radio" name="tab-list" id="tab-input-4"/>

   <div class="tab__list">
      <label for="tab-input-1" class="tab__element" id="tab-list-1">Descrição</label>
      
      <label for="tab-input-2" class="tab__element" id="tab-list-2">Avaliações</label>

      <label for="tab-input-3" class="tab__element" id="tab-list-3">Especificações</label>
      
      <!-- Para desativar uma tab adicione a classe disabled no elemento <label> -->
      <label for="tab-input-4" class="tab__element disabled" id="tab-list-4">Trocas & Devoluções</label>
   </div>

   <div class="tab__content">
      <div class="tab__content--section" id="tab-section-1">
         <p>Seu primeiro conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-2">
         <p>Seu segundo conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-3">
         <p>Seu terceiro conteúdo aqui</p>
      </div>
      
      <div class="tab__content--section" id="tab-section-4">
         <p>Seu quarto conteúdo aqui</p>
      </div>
   </div>
</div>

CSS

.tabs{
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  overflow: hidden;
}

.tabs input {
  display: none;
}

.tab__list{
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1px;
  padding-bottom: 1px;
  background-color: #E6E6E6;
  width: 100%;
}

#tab-input-1:checked ~ .tab__list #tab-list-1,
#tab-input-2:checked ~ .tab__list #tab-list-2,
#tab-input-3:checked ~ .tab__list #tab-list-3,
#tab-input-4:checked ~ .tab__list #tab-list-4{
  background-color: #F5F5F5;
  border-bottom: 2px solid #01141E;
  color: #01141E;
}

.tab__element{
  height: 48px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: center;
  color: #757575;
  background-color: #fff;
  border-bottom: 2px solid #E6E6E6;
  cursor: pointer;
}

.tab__element:hover{
  color: #000000;
  border-bottom: 2px solid #A7A7A7;
}

.tab__element.disabled{
  color: #A7A7A7;
  border-bottom: 2px solid #E6E6E6;
  pointer-events: none;
}

.tab__content{
  padding: 20px;
}

.tab__content--section {
  display: none;
}

#tab-input-1:checked ~ .tab__content #tab-section-1,
#tab-input-2:checked ~ .tab__content #tab-section-2,
#tab-input-3:checked ~ .tab__content #tab-section-3,
#tab-input-4:checked ~ .tab__content #tab-section-4 {
  display: block;
}

Tabs com destaque colorido

Preview

HTML

<div class="tabs">
   <input type="radio" name="tab-list" id="tab-input-1" checked/>
   <input type="radio" name="tab-list" id="tab-input-2"/>
   <input type="radio" name="tab-list" id="tab-input-3"/>
   <input type="radio" name="tab-list" id="tab-input-4"/>

   <div class="tab__list">
      <label for="tab-input-1" class="tab__element" id="tab-list-1">Descrição</label>
      
      <label for="tab-input-2" class="tab__element" id="tab-list-2">Avaliações</label>

      <label for="tab-input-3" class="tab__element" id="tab-list-3">Especificações</label>
      
      <!-- Para desativar uma tab adicione a classe disabled no elemento <label> -->
      <label for="tab-input-4" class="tab__element disabled" id="tab-list-4">Trocas & Devoluções</label>
   </div>

   <div class="tab__content">
      <div class="tab__content--section" id="tab-section-1">
         <p>Seu primeiro conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-2">
         <p>Seu segundo conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-3">
         <p>Seu terceiro conteúdo aqui</p>
      </div>
      
      <div class="tab__content--section" id="tab-section-4">
         <p>Seu quarto conteúdo aqui</p>
      </div>
   </div>
</div>

CSS

.tabs{
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  overflow: hidden;
}

.tabs input {
  display: none;
}

.tab__list{
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 1px;
  background-color: #E6E6E6;
  width: 100%;
}

#tab-input-1:checked ~ .tab__list #tab-list-1,
#tab-input-2:checked ~ .tab__list #tab-list-2,
#tab-input-3:checked ~ .tab__list #tab-list-3,
#tab-input-4:checked ~ .tab__list #tab-list-4{
  background-color: #F5F5F5;
  border-bottom: 2px solid #28B95E;
  color: #01141E;
}

.tab__element{
  height: 48px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: center;
  color: #757575;
  background-color: #fff;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab__element:hover{
  color: #000000;
  border-bottom: 2px solid #A7A7A7;
}

.tab__element.disabled{
  color: #A7A7A7;
  border-bottom: 2px solid transparent;
  pointer-events: none;
}

.tab__content{
  padding: 20px;
}

.tab__content--section {
  display: none;
}

#tab-input-1:checked ~ .tab__content #tab-section-1,
#tab-input-2:checked ~ .tab__content #tab-section-2,
#tab-input-3:checked ~ .tab__content #tab-section-3,
#tab-input-4:checked ~ .tab__content #tab-section-4 {
  display: block;
}

Tabs em formato box

Preview

HTML

<div class="tabs">
   <input type="radio" name="tab-list" id="tab-input-1" checked/>
   <input type="radio" name="tab-list" id="tab-input-2"/>
   <input type="radio" name="tab-list" id="tab-input-3"/>
   <input type="radio" name="tab-list" id="tab-input-4"/>

   <div class="tab__list">
      <label for="tab-input-1" class="tab__element" id="tab-list-1">Descrição</label>
      
      <label for="tab-input-2" class="tab__element" id="tab-list-2">Avaliações</label>

      <label for="tab-input-3" class="tab__element" id="tab-list-3">Especificações</label>
      
      <!-- Para desativar uma tab adicione a classe disabled no elemento <label> -->
      <label for="tab-input-4" class="tab__element disabled" id="tab-list-4">Trocas & Devoluções</label>
   </div>

   <div class="tab__content">
      <div class="tab__content--section" id="tab-section-1">
         <p>Seu primeiro conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-2">
         <p>Seu segundo conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-3">
         <p>Seu terceiro conteúdo aqui</p>
      </div>
      
      <div class="tab__content--section" id="tab-section-4">
         <p>Seu quarto conteúdo aqui</p>
      </div>
   </div>
</div>

CSS

.tabs{
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  overflow: hidden;
}

.tabs input {
  display: none;
}

.tab__list{
  display: flex;
  padding: 4px;
  margin: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  background-color: #fff;
  width: 100%;
}

#tab-input-1:checked ~ .tab__list #tab-list-1,
#tab-input-2:checked ~ .tab__list #tab-list-2,
#tab-input-3:checked ~ .tab__list #tab-list-3,
#tab-input-4:checked ~ .tab__list #tab-list-4{
  background-color: #2C2C2C;
  color: #fff;
}

.tab__element{
  height: 48px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: center;
  color: #757575;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.tab__element:hover{
  background-color: #F5F5F5;
  color: #000000;
}

.tab__element.disabled{
  color: #A7A7A7;
  pointer-events: none;
}

.tab__content{
  padding: 20px;
}

.tab__content--section {
  display: none;
}

#tab-input-1:checked ~ .tab__content #tab-section-1,
#tab-input-2:checked ~ .tab__content #tab-section-2,
#tab-input-3:checked ~ .tab__content #tab-section-3,
#tab-input-4:checked ~ .tab__content #tab-section-4 {
  display: block;
}

Tabs sem bordas

Preview

HTML

<div class="tabs">
   <input type="radio" name="tab-list" id="tab-input-1" checked/>
   <input type="radio" name="tab-list" id="tab-input-2"/>
   <input type="radio" name="tab-list" id="tab-input-3"/>
   <input type="radio" name="tab-list" id="tab-input-4"/>

   <div class="tab__list">
      <label for="tab-input-1" class="tab__element" id="tab-list-1">Descrição</label>
      
      <label for="tab-input-2" class="tab__element" id="tab-list-2">Avaliações</label>

      <label for="tab-input-3" class="tab__element" id="tab-list-3">Especificações</label>
      
      <!-- Para desativar uma tab adicione a classe disabled no elemento <label> -->
      <label for="tab-input-4" class="tab__element disabled" id="tab-list-4">Trocas & Devoluções</label>
   </div>

   <div class="tab__content">
      <div class="tab__content--section" id="tab-section-1">
         <p>Seu primeiro conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-2">
         <p>Seu segundo conteúdo aqui</p>
      </div>

      <div class="tab__content--section" id="tab-section-3">
         <p>Seu terceiro conteúdo aqui</p>
      </div>
      
      <div class="tab__content--section" id="tab-section-4">
         <p>Seu quarto conteúdo aqui</p>
      </div>
   </div>
</div>

CSS

.tabs {
  width: 100%;
  height: auto;
  background-color: #fff;
  overflow: hidden;
}

.tabs input {
  display: none;
}

.tab__list {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #E6E6E6;
  background-color: #E6E6E6;
  width: 100%;
}

#tab-input-1:checked~.tab__list #tab-list-1,
#tab-input-2:checked~.tab__list #tab-list-2,
#tab-input-3:checked~.tab__list #tab-list-3,
#tab-input-4:checked~.tab__list #tab-list-4 {
  background-color: #F5F5F5;
  border-bottom: 2px solid #01141E;
  color: #01141E;
}

.tab__element {
  height: 48px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: center;
  color: #757575;
  background-color: #fff;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab__element:hover {
  color: #000000;
  border-bottom: 2px solid #A7A7A7;
}

.tab__element.disabled {
  color: #A7A7A7;
  border-bottom: 2px solid transparent;
  pointer-events: none;
}

.tab__content {
  padding: 20px;
}

.tab__content--section {
  display: none;
}

#tab-input-1:checked~.tab__content #tab-section-1,
#tab-input-2:checked~.tab__content #tab-section-2,
#tab-input-3:checked~.tab__content #tab-section-3,
#tab-input-4:checked~.tab__content #tab-section-4 {
  display: block;
}