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

Адаптивные вкладки без использования 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;
    } 
} 

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