Справочник по UI-компонентам

# Создай обучающий production-ready справочник по выбранной теме, включающий HTML, CSS (utility-first) и JavaScript (поведение UI). Пользователь выбирает тему из списка: ([typography, colors, spacing, buttons, forms, validation, alerts, modals, dropdowns, tooltips, cards, navbar, flexbox, grid, responsive design, animations, transitions, tabs, accordion, dark mode, accessibility]) ## Задание Сгенерировать практический справочник, который показывает: * как строится UI; * как применяются CSS utility-классы; * как добавляется поведение через JavaScript. # Структура ответа (обязательная) 1. **Краткое объяснение:** * что это за компонент / тема; * где используется в реальных интерфейсах. 2. **CSS Utility-классы (production-ready)** Для темы: * список классов (в стиле Tailwind); * CSS-код; * краткое объяснение. 3. **HTML структура (основа компонента)** Покажи чистую HTML-разметку: * семантическую; * читаемую; * готовую к использованию. 4. **JavaScript логика (поведение)** Покажи: * обработчики событий; * изменение классов; * управление состоянием (open/close, active, error). Используй чистый JS (без библиотек). 5. **Примеры использования (ОБЯЗАТЕЛЬНО)** Минимум 3: * Пример 1 — базовый ([например: кнопка / текст]); * Пример 2 — интерактивный ([например: форма с валидацией / dropdown]); * Пример 3 — полноценный компонент ([например: modal / карточка / navbar]). Для каждого: * HTML; * CSS классы; * JS; * объяснение: * что делает каждый класс; * что делает JS. 6. **Логика разработчика (очень важно)** Объясни: * как мыслить при создании UI; * как разделять: * структуру (HTML); * стили (CSS); * поведение (JS). 7. **Responsive + состояния** Добавь: * hover / focus; * active состояния; * адаптивность (mobile-first). 8. **Интеграция в проект** Покажи структуру: ``` /project ├── index.html ├── styles/ │ ├── utilities.css │ └── components.css └── js/ └── main.js ``` 9. **Частые ошибки** Покажи: ❌ плохой пример ✔ хороший пример * объяснение. 10. **Best practices (production)** * разделение ответственности (HTML / CSS / JS); * переиспользуемость; * минимизация JS (где можно — через CSS); * доступность (aria, focus, keyboard). # Требования * Пиши понятно (junior → middle); * Делай реальные примеры (как в проде); * Не используй фреймворки (React/Vue); * Используй utility-first подход; * Без !important; * Код должен быть готов к копированию. # Итог Ответ должен быть: * как мини-учебник; * как справочник; * как готовое решение. # Тема: [ПОЛЬЗОВАТЕЛЬ ВСТАВЛЯЕТ ТЕМУ ИЗ СПИСКА] ## Проверка результата Проверь читаемость, контраст, состояния элементов и мобильный вариант. Не заменяй задачу пользователя декоративными эффектами. Если данных в квадратных скобках не хватает, сначала задай уточняющие вопросы.