PESTAÑAS
Pestañas
Panel 01
Phasellus porta suscipit orci sed vestibulum. Vivamus placerat quam sed leo posuere cursus. Curabitur auctor elementum iaculis. Suspendisse finibus arcu sem, at eleifend lorem varius eget. Donec eu mauris vitae massa accumsan facilisis vitae eu tortor. Suspendisse at nisl eu ligula euismod posuere. Vestibulum viverra lorem in dui feugiat posuere.
Morbi molestie commodo sapien et semper. Suspendisse in tortor sit amet quam laoreet lacinia. Maecenas tellus metus, finibus ornare mi id, pharetra vestibulum lectus. Morbi quis placerat purus. Phasellus nec condimentum lorem, et ullamcorper ex.
CSS
Fuente: Montserrat SemiBold, 1rem (16px)
Font-weight: 400
Espaciado: superior 16px; inferior 32px
Radio: 12px
Pestaña activa
Color: #004d71 (rgb(0, 77, 113);)
Fondo: blanco
Borde 3px #004d71
Pestaña inactiva
Color: #212529 rgb(33, 37, 41)
Fondo: #f5f3f3 rgb(245, 243, 243)
Borde 2px #cacaca
Rollover: Fondo #004d71, color blanco
Panel
Fuente: Montserrat SemiBold, 0,9rem (14,4px)
Fondo: #f5f3f3 rgb(245, 243, 243)
Espaciado: 3rem (48px)
Borde 3px #004d71
HTML
<div class="tabs">
<div class="tabs--nav" role="tablist">
<button class="tabs--tab" role="tab" aria-selected="true" aria-controls="pan-01" id="tab-01" tabindex="0">Pestaña 01</button>
<button class="tabs--tab" role="tab" aria-selected="false" aria-controls="pan-02" id="tab-02" tabindex="-1">Pestaña 02</button>
<button class="tabs--tab" role="tab" aria-selected="false" aria-controls="pan-03" id="tab-03" tabindex="-1">Pestaña 03</button>
</div>
<div class="tabs--content">
<div class="tabs--pannel is-active" tabindex="0" role="tabpanel" id="pan-01" aria-labelledby="tab-01">
<p>Panel 01</p>
</div>
<div class="tabs--pannel" tabindex="0" role="tabpanel" id="pan-02" aria-labelledby="tab-02" aria-hidden="true">
<p>Panel 02</p>
</div>
<div class="tabs--pannel" tabindex="0" role="tabpanel" id="pan-03" aria-labelledby="tab-03" aria-hidden="true">
<p>Panel 03</p>
</div>
</div>
</div>