В нашем мире без JavaScript никуда!

Множество фреймворков и библиотек! jQuery прочно вошел в нашу жизнь. React с Angular пробивают дорогу к светлому будущему с поддержкой браузерами ES6 без Babel. 

Но порой задаешься вопросом: «А если без JavaScript, используя только html и css?».

1. Табы / вкладки
 

label — вкладка;
p — контейнер для текста (можно заменить на div, к примеру).
Чтобы добавить новую вкладку, надо добавить в html теги input+label+p.

2. Аккордеон

 
Работает по такому же принципу, как и 1 пример.

3. Модальное окно

 
Модальное окно открыто, когда input:checked.

Теперь в любом месте в документе можно разместить кнопку label[for=zayavka], нажатие на которую будет открывать модальное окно. «zayavka» — это id модального окна, а точнее id input'а, который его «открывает». Т.е. что бы добавить еще 1 модальное окно, надо скопировать input+div.modal и заменить id input'а и for у label, которые с ним связаны.

4. Навигация / меню

 
Это вариант реализации мобильного меню с подпунктами. Можно, естественно, адаптировать через медиа-запросы до десктопной версии.

5. Слайдер с превью изображений

 
Размер слайдера и количество изображений в нем можно сделать любое. Чтобы добавить новое изображение, нужно скопировать конструкцию input+(.item>img)+label>img (опять же, это можно генерировать автоматически на стороне сервера). Первый img — это основное изображение, второй img — превью. При желании, flex можно заменить на inline-block или float.

6. Карусель с «ленивой» загрузкой изображений

 
Размер карусели и количество изображений в ней можно сделать любое. Также можно доработать css и сделать отображение нескольких изображений в ряд. «Ленивая» загрузка здесь достигается путем того, что изображения прописываются в background-image для div, а в css есть строка, которая перебивает это свойство для div, которые не отображены на экране. В итоге, изображения загрузятся только тогда, когда пользователь начнет листать карусель.

Div с background-image можно заменить на обычный <img>, но тогда ленивая загрузка работать не будет. Чтобы добавить новое изображение, надо добавить в html теги input+div>label+.item. Причем, for у label должен вести на input перед предыдущим изображением (пример см. в коде выше).

Один из плюс таких реализаций — это работа в браузерах с выключенным JavaScript (если в наше время кто-то таким пользуется).