Para aquellos momentos en que necesitas resumir toda tu informacion en un corto espacio. Los "tabs" te permiten mostrar mucho contenido sin salir de la página web actual
<div class="toggle-wrapper">
<input id="provide-muffins" name="provide_muffins" class="toggle" type="checkbox" checked />
<label for="provide-muffins" class="toggle--label"></label>
<div class="foux-toggle"></div>
</div>
.toggle-wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 5rem;
height: 2.5rem;
font-family: sans-serif;
font-size: 0.75rem;
font-weight: 100;
}
.toggle {
display: none;
}
.foux-toggle {
position: relative;
width: 5rem;
height: 2.5rem;
border-radius: 2.5rem;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #E4E4E4;
background-color: #F7F7F7;
-webkit-transition: background-color 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
transition: background-color 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
}
.foux-toggle:before {
content: "";
position: absolute;
top: 0.25rem;
left: 0.3125rem;
display: block;
width: 1.875rem;
height: 1.875rem;
border-radius: 1.875rem;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
transition: left 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
}
.toggle:checked ~ .foux-toggle {
border-color: #7acbee;
background-color: #8bd8fc;
}
.toggle:checked ~ .foux-toggle:before {
left: 2.75rem;
}
.toggle--label:before, .toggle--label:after {
position: absolute;
top: 0;
bottom: 0;
-webkit-transition: opacity 0.4s linear;
transition: opacity 0.4s linear;
}
.toggle--label {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 2.5rem;
cursor: pointer;
z-index: 10;
letter-spacing: 0.0625rem;
}
.toggle--label:before {
content: 'On';
right: 40%;
left: 0;
color: white;
opacity: 0;
}
.toggle:checked + .toggle--label:before {
opacity: 1;
}
.toggle--label:after {
content: 'Off';
position: absolute;
right: 0;
left: 40%;
opacity: 1;
}
.toggle:checked + .toggle--label:after {
opacity: 0;
-webkit-transition-duration: 0.05s;
transition-duration: 0.05s;
}
html {
background-color: #FBFBFB;
}