Адаптивные вкладки (табы)

Адаптивные вкладки без использования javascript

Архитектура переключателей:

<div class="tabs">
    <input id="tab_1" type="radio" name="tabs" checked>
    <label for="tab_1" title="Вкладка 1">Вкладка 1</label>
 
    <input id="tab_2" type="radio" name="tabs">
    <label for="tab_2" title="Вкладка 2">Вкладка 2</label>
    
    <section id="content_1">
        <p>Здесь размещаете любое содержание....1</p>
    </section>  
    <section id="content_2">
        <p>Здесь размещаете любое содержание...2</p>
    </section>
</div>

Стили переключателей:

.tabs {
    min-width: 320px;
    max-width: 800px;
    padding: 0px;
    margin: 0 auto; 
}
.tabs>section {
    display: none;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
}
.tabs>input {
    display: none;
}
.tabs>label {
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #aaa;
    border: 1px solid #ddd;
    background: #f1f1f1;
    border-radius: 3px 3px 0 0;
}
.tabs>label:hover {
    color: #888;
    cursor: pointer;
}
.tabs>input:checked + label {
    color: #555;
    border: 1px solid #ddd;
    border-top: 1px solid #009933;
    border-bottom: 1px solid #fff;
    background: #fff;
}
#tab_1:checked ~ #content_1,
#tab_2:checked ~ #content_2{
    display: block;
}
@media screen and (max-width: 680px) {
    .tabs>label {
        font-size: 0;
    }
    .tabs>label:before {
        margin: 0;
        font-size: 18px;
    }
}
@media screen and (max-width: 400px) {
    .tabs>label {
        padding: 15px;
    }
}

Пример: пример