Вкладки на чистом css

Вкладки на чистом css для любого сайта с иконками в табах. В поле вкладки можно вставлять любой контент!

Рабочий пример вкладок на css, без скриптов все очень просто

Код HTML:

<div class="vkladki">
    <input id="tab1" type="radio" name="vkladki" checked>
    <label for="tab1" title="Вкладка 1">Вкладка 1</label>
 
    <input id="tab2" type="radio" name="vkladki">
    <label for="tab2" title="Вкладка 2">Вкладка 2</label>
 
    <input id="tab3" type="radio" name="vkladki">
    <label for="tab3" title="Вкладка 3">Вкладка 3</label>
 
    <input id="tab4" type="radio" name="vkladki">
    <label for="tab4" title="Вкладка 4">Вкладка 4</label>
 
    <section id="content-tab1">
        <p>
		Содерижимое 1 вкладки....
        </p>
    </section>  
    <section id="content-tab2">
        <p>
          Содерижимое 2 вкладки...
        </p>
    </section> 
    <section id="content-tab3">
        <p>
          Содерижимое 3 вкладки...
		</p>
    </section> 
    <section id="content-tab4">
        <p>
          Содерижимое 4 вкладки...
        </p>
    </section>    
</div>

Код CSS:

<style>
.vkladki {min-width: 320px;padding: 0px;margin: 0 auto 40px auto;}
.vkladki > section {display: none;padding: 15px;background: #fff;border: 1px solid #ddd;}
.vkladki > section>p {margin: 0 0 5px;line-height: 1.5;color: #383838;	animation-duration: 1s;animation-name: forvkladki;}
 @keyframes forvkladki {from {opacity: 0;} to {opacity: 1;}}

.vkladki > input {display: none;position: absolute;}
/* Стили переключателей вкладок (табов) */
.vkladki > label {display: inline-block;margin: 0 0 -1px;padding: 15px 25px;font-weight: 600;text-align: center;color: #aaa;border: 0px solid #ddd;border-width: 1px 1px 1px 1px;background: #f1f1f1;border-radius: 3px 3px 0 0;}
/* Стили иконок */
.vkladki > label:before {font-family: fontawesome;font-weight: normal;margin-right: 10px;}
.vkladki > label[for*="1"]:before {content: "\f19a";}
.vkladki > label[for*="2"]:before {content: "\f17a";}
.vkladki > label[for*="3"]:before {content: "\f13b";}
.vkladki > label[for*="4"]:before {content: "\f13c";}
 
.vkladki > label:hover {color: #888;cursor: pointer;}
/* Стили для активной вкладки */
.vkladki > input:checked+label {color: #555;border-top: 1px solid #009933;border-bottom: 1px solid #fff;background: #fff;}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {display: block; overflow:hidden;}

/* Убираем текст с переключателей * и оставляем иконки на малых экранах */
 @media screen and (max-width: 680px) {
.vkladki > label {font-size: 0;}
.vkladki > label:before {	margin: 0;	font-size: 18px;} 
}
/* Изменяем внутренние отступы *  переключателей для малых экранов */
@media screen and (max-width: 400px) {
.vkladki > label {padding: 15px;}
}
</style>

Рабочий пример вкладок: