Команда выпускает первую версию кабинета пользователя. Продакт жалуется:
«Пользователи пишут, что при авторизации у них:
– пароль видно как обычный текст,
– фокус поTabпрыгает как-то странно,
– скринридер не читает названия полей,
– при ошибке валидации бэкенд не получает email и пароль, хотя они точно введены».
Верстальщик, который делал форму, больше недоступен. Нужно разобрать его код и привести разметку в порядок, не меняя визуал радикально.
Что нужно сделать
Найти и исправить семантические ошибки:
type="text" и т.д.);name, id, for;label, aria-*, неправильный порядок фокуса).Аккуратно использовать Tailwind-классы из исходника:
Обеспечить базовую UX-адекватность:
Tab;Важно не только визуально починить форму, но и сделать её корректной для:
Можно добавить пару улучшений (например, autocomplete="email" / current-password), но не превращать задание в полный редизайн.
login-form-broken.html<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Вход</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="bg-white rounded-xl shadow p-6 w-full max-w-sm">
<h1 class="text-xl font-bold text-gray-900 mb-4 text-center">
Вход в аккаунт
</h1>
<!-- Форма с ошибками -->
<form action="/login" method="GET">
<!-- Email -->
<div class="mb-3">
<label class="text-sm text-gray-700">Email</label><br />
<input
type="text"
class="border border-gray-300 rounded px-2 py-1 w-full text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
placeholder="Введите email"
/>
</div>
<!-- Пароль -->
<div class="mb-3">
<label
class="text-sm text-gray-700"
for="password"
>Пароль</label
><br />
<input
type="text"
id="user-password"
class="border border-gray-300 rounded px-2 py-1 w-full text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
placeholder="Пароль"
/>
</div>
<!-- Чекбокс "запомнить" с проблемами -->
<div class="mb-4">
<input
type="checkbox"
id="remember"
class="mr-2 align-middle"
/>
<label for="remember-me" class="text-xs text-gray-700">
запомнить меня
</label>
</div>
<!-- Кнопка входа -->
<button
style="width: 100%;"
class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium py-2 px-4 rounded"
>
Войти
</button>
</form>
</div>
</body>
</html>
Дизайнер прислал два макета нового элемента управления — переключателя уведомлений (toggle).
– В состоянии «выключено» — серый фон и серый кружок слева.
– В состоянии «включено» — цветной фон и белый кружок справа.
– На десктопе переключатель должен выглядеть крупнее и с подписью «Уведомления».
– На мобильном варианте — компактный вариант без подписи, только иконка-текст рядом.
Нужно подобрать подходящий HTML-элемент в основе (чтобы компонент был семантически корректным) и сверстать его на Tailwind.
Что нужно сделать
Выбрать семантическую основу компонента:
input type="checkbox" + label (рекомендуется).button с aria-pressed="true/false" и управлением состоянием.Обеспечить:
aria-checked или aria-pressed в зависимости от варианта);Что полезно знать до задания
Нюансы
Можно сохранить как отдельные файлы toggle-off.svg и toggle-on.svg. Они задают общее ощущение стиля, а не точные размеры.
toggle-off.svg<svg width="80" height="40" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="8" rx="20" ry="20" width="76" height="24" fill="#E5E7EB" />
<circle cx="22" cy="20" r="10" fill="#9CA3AF" />
</svg>
toggle-on.svg<svg width="80" height="40" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="8" rx="20" ry="20" width="76" height="24" fill="#4F46E5" />
<circle cx="58" cy="20" r="10" fill="#FFFFFF" />
</svg>
toggle-task.html<!DOCTYPE html>
<html lang="ru" class="h-full">
<head>
<meta charset="UTF-8" />
<title>Задание: Toggle</title>
<!-- Предполагается, что Tailwind подключен через CDN или сборку проекта -->
</head>
<body class="min-h-screen bg-slate-100 flex items-center justify-center">
<main class="bg-white rounded-2xl shadow p-8 w-full max-w-xl space-y-8">
<section>
<h1 class="text-xl font-bold text-slate-900 mb-2">
Задание: переключатель уведомлений
</h1>
</section>
<section class="space-y-3">
<h2 class="text-sm font-semibold text-slate-800">
Вариант 2: toggle с подписью
</h2>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-900">
Уведомления по email
</p>
<p class="text-xs text-slate-500">
Включите, чтобы получать обновления о статусе заказов.
</p>
</div>
<!-- TODO: ваш toggle с подписью -->
</div>
</section>
</main>
</body>
</html>
Маркетинг запускает кампанию и просит отдельную красивую страницу регистрации:
«Нам нужна страница, где форма регистрации стоит по центру экрана,
с мягким фоном-картинкой сзади,
всё хорошо выглядит на мобилке,
и у нас есть тёмная тема — при переключении сайт должен смотреться так же круто».
Нужно сверстать такую страницу на Tailwind, сразу максимально аккуратно и «по учебнику».
Что нужно сделать
Сверстать одну страницу регистрации:
background-image);Использовать Tailwind:
max-w-md / max-w-lg);Реализовать адаптив:
Поддержать тёмную тему:
dark:*;html внешним кодом ставится класс dark.Нюансы
На странице Figma уже есть готовый дизайн. Обратите внимание, что там на фоне картинки нет, ваша задача добавить любую картинку.