Tabs
Tabs com bordas
- Preview
- HTML
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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
- CSS
<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>
.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;
}