css
/***************************************
*
* Reset
*
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px/1 sans-serif;
color: #333;
background-color: #eee;
}
/***************************************
*
* Grid
*
*/
.large-12 {
padding: 15px;
}
/***************************************
*
* Layout
*
*/
.header {
height: 100px;
padding-top: 30px;
text-align: center;
}
.logo {
font-family: 'Avenir Next', sans-serif;
font-size: 16px;
font-weight: 600;
}
.wrapper {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
}
.inner {
width: 500px;
margin: auto;
padding: 15px 0;
}
/***************************************
*
* Tabs
*
*/
.c-tabs {
position: relative;
display: flex;
flex-wrap: wrap;
}
.c-tabs [id*='-tab-content-'] {
display: none;
}
.c-tabs input[type='checkbox'],
.c-tabs input[type='radio'] {
display: none;
}
.c-tabs label {
flex: 1;
padding: 10px 0;
text-align: center;
color: #59d;
border: 1px solid #59d;
border-left-width: 0;
}
.c-tabs label:nth-child(2) {
border-left-width: 1px;
}
.c-tabs input:checked + label {
color: #fff;
background: #59d;
}
/***************************************
*
* Helper Classes
*
*/
.c-tabs-content label {
border: 0;
}
.c-tabs-minimal label {
flex: none;
padding: 10px;
}
/***************************************
*
* Content
*
*/
.c-content {
display: none;
width: 100%;
padding: 15px;
background: #eee;
}
#c-tab-11:checked ~ #c-content-11,
#c-tab-12:checked ~ #c-content-12,
#c-tab-13:checked ~ #c-content-13,
#c-tab-14:checked ~ #c-content-14,
#c-tab-15:checked ~ #c-content-15,
#c-tab-16:checked ~ #c-content-16,
#c-tab-17:checked ~ #c-content-17,
#c-tab-18:checked ~ #c-content-18,
#c-tab-19:checked ~ #c-content-19,
#c-tab-20:checked ~ #c-content-20 {
display: block;
}