Вы работаете в продуктовой команде, которая развивает лендинг для нового сервиса. Первый прототип делал другой разработчик “на скорую руку” и написал стили в обычном CSS-файле.
Команда переезжает на Tailwind, чтобы:
Вам нужно переписать существующую страницу на Tailwind, сохранив внешний вид.
Вам дано две вещи:
index.html — страница с лендингом продукта;styles.css — обычные CSS-стили.Ваша задача:
index-tailwind.html;styles.css;С точки зрения UI:
index-tailwind.html запрещено подключать styles.css.bg-gray-100, bg-white, text-gray-700, text-blue-600 и т.п.index.html<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Product Landing (CSS версия)</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="page-wrapper">
<div class="product-card">
<span class="product-badge">Новинка</span>
<h1 class="product-title">Сервис аналитики “InsightX”</h1>
<p class="product-subtitle">
Отслеживайте ключевые метрики продукта в одном месте.
Простые дашборды, понятные графики, уведомления в Telegram.
</p>
<ul class="product-features">
<li>Готовые отчёты по Retention, DAU, LTV</li>
<li>Интеграции с Amplitude, Mixpanel, Google Analytics</li>
<li>Еженедельные email-дайджесты с рекомендациями</li>
</ul>
<div class="product-footer">
<div class="product-price">
<span class="price-main">19 $/мес</span>
<span class="price-note">Первые 14 дней — бесплатно</span>
</div>
<button class="product-button">Попробовать</button>
</div>
</div>
</div>
</body>
</html>
styles.css* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: #f3f4f6; /* серый фон */
color: #111827; /* темный текст */
}
.page-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.product-card {
max-width: 420px;
width: 100%;
background-color: #ffffff;
border-radius: 16px;
padding: 24px 24px 20px;
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
0 10px 10px -5px rgba(0,0,0,0.04);
}
.product-badge {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
background-color: #eef2ff;
color: #4f46e5;
padding: 4px 10px;
border-radius: 9999px;
margin-bottom: 12px;
}
.product-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: #111827;
}
.product-subtitle {
font-size: 14px;
line-height: 1.6;
color: #4b5563;
margin-bottom: 16px;
}
.product-features {
list-style: none;
margin-bottom: 20px;
}
.product-features li {
font-size: 14px;
color: #374151;
padding-left: 18px;
position: relative;
margin-bottom: 8px;
}
.product-features li::before {
content: "•";
position: absolute;
left: 0;
color: #10b981;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.product-price {
display: flex;
flex-direction: column;
}
.price-main {
font-size: 20px;
font-weight: 700;
color: #111827;
}
.price-note {
font-size: 12px;
color: #6b7280;
}
.product-button {
padding: 10px 18px;
border-radius: 9999px;
border: none;
background-color: #2563eb;
color: #ffffff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease;
white-space: nowrap;
}
.product-button:hover {
background-color: #1d4ed8;
}
Вы подключились к существующему проекту. Другая команда уже попыталась перевести часть лендинга на Tailwind, но:
Продакт прислал текстовое описание того, как должно быть. Ваша задача — найти и исправить ошибки в Tailwind-классаx.
Вам дан один файл landing-buggy.html с подключённым Tailwind через CDN.
В начале файла — текстовое описание экрана, который должен получиться.
Ниже — реальная верстка с Tailwind-классами, где допущены ошибки:
texts-lg, bg-grey-500 и т.п.);Ваша задача:
Вёрстка уже “вроде бы работает”, но выглядит не так, как требуется.
Важно не просто поправить опечатки, а проверить всё поведение:
Вам не нужно придумывать свой дизайн — всё задано в описании в начале файла.
landing-buggy.html<!DOCTYPE html>
<html lang="ru" class="dark">
<head>
<meta charset="UTF-8">
<title>Задание 2 — исправление Tailwind-кода</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50">
<!--
ОПИСАНИЕ ТРЕБУЕМОГО ЭКРАНА (ТЗ):
Экран "Панель продукта" должен выглядеть так:
1. В центре страницы — карточка шириной максимум 960px, с отступами сверху/снизу.
2. У карточки белый фон в светлой теме и тёмно-серый (#111827) в тёмной теме.
3. Содержимое карточки:
- Сверху: заголовок "Обзор продукта" и подзаголовок
в одну колонку на мобильном, в две — на широких экранах (заголовок слева, подзаголовок справа).
- Ниже: три "метрики" в виде карточек в одну колонку на мобильном, в три — на десктопе.
4. Каждая метрика:
- Заголовок (например, "Активные пользователи"),
- крупное число,
- подпись с пояснением.
5. В светлой теме фон карточек — светло-серый, текст — тёмный.
В тёмной теме фон карточек — чуть светлее основного фона, текст — почти белый.
6. Адаптивность:
- На мобильном всё в одну колонку, с хорошими вертикальными отступами.
- Начиная с `md:` заголовок/подзаголовок в две колонки.
- Начиная с `lg:` метрики в три колонки.
ВАЖНО: используем только Tailwind-классы, без кастомного CSS.
-->
<!-- НИЖЕ — ИСХОДНЫЙ "КРИВОЙ" КОД, КОТОРЫЙ НУЖНО ИСПРАВИТЬ -->
<main class="min-h-screen flex items-center justify-center px-2">
<section class="max-w-7xl w-full bg-gray-100 dark:bg-gray-800 rounded-xl p-4 shadow-md">
<!-- Заголовок и подзаголовок -->
<header class="grid grid-cols-2 gap-6 mb-6">
<div>
<h1 class="texts-3xl font-bold mb-1 text-grey-900 dark:text-white">
Обзор продукт
</h1>
<p class="text-sm text-gray-700 dark:text-gray-300">
Краткий снимок ключевых метрик вашего продукта за последние 7 дней.
</p>
</div>
<div class="flex flex-col justify-end">
<p class="text-base text-gray-600 dark:text-gray-400">
Следите за активными пользователями, конверсией и удержанием в одном месте.
</p>
</div>
</header>
<!-- Блок метрик -->
<div class="grid grid-cols-3 gap-3">
<article class="rounded-lg bg-gray-200 dark:bg-gray-700 p-3">
<h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">
Активные пользователи
</h2>
<p class="texts-3xl font-semibol text-gray-900 dark:text-gray-50">
12 480
</p>
<p class="text-xs text-gray-600 dark:text-gray-400">
+12% по сравнению с прошлой неделей
</p>
</article>
<article class="rounded bg-gray-200 dark:bg-gray-950 p-3">
<h2 class="text-sm font-medium text-gray500 dark:text-gray-400">
Конверсия
</h2>
<p class="text-2x1 font-semibold text-gray-900 dark:text-white">
4.7%
</p>
<p class="text-xs text-gray-600 dark:text-gray-500">
Цель на этот квартал: 5.2%
</p>
</article>
<article class="rounded-lg bg-gray-200 dark:bg-gray-700 p-3">
<h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">
Удержание (30 дней)
</h2>
<p class="text-3xl font-semibold text-grey-900 dark:text-gray-50">
62%
</p>
<p class="text-xs text-gray-600">
Лёгкое снижение после обновления тарифа
</p>
</article>
</div>
</section>
</main>
</body>
</html>
Вы подключились к небольшому онлайн-школе “TailwindSchool”, которая запускает новый курс: «Tailwind за 7 дней».
Дизайнер подготовил макет лендинга в Figma.
Вам нужно сверстать этот лендинг:
dark:-классы Tailwind.Лендинг будет использоваться как основная промо-страница курса, поэтому он должен быть аккуратным, читаемым и достаточно “продуктовым”.
У вас уже есть:
task3/index.html,task3/design-spec.md.Ваша задача:
Заполнить index.html разметкой и Tailwind-классами по описанию из design-spec.md.
Обеспечить:
dark:.Не использовать собственный CSS — только utility-классы Tailwind (допускаются встроенные классы Tailwind + встроенный transition/duration и т.п., но без <style> и .css).
Лендинг состоит из пяти крупных блоков:
Шапка (header)
Слева: текстовый логотип TailwindSchool с акцентом на слове Tailwind.
Справа (на десктопе): горизонтальное меню с пунктами:
На мобильном md: можно упростить: меню может исчезать или становиться более компактным — бургер не обязателен.
Hero-блок (верхний промо-блок)
Левый столбец:
Правый столбец:
indigo, внутри несколько “серых полосок” и блоков, имитирующих UI.Адаптив:
md: — двухколоночная сетка (текст слева, “картинка” справа).Блок “Что внутри курса”
Заголовок по центру: “Что внутри курса”.
Подзаголовок одной строкой/двумя строками, тоже по центру.
Ниже — три карточки в сетке:
Каждая карточка:
rounded-xl, shadow + лёгкая граница;Адаптив:
< md) — одна колонка (grid-cols-1);md: — три колонки (grid-cols-3) с gap.Блок “Тариф”
Один основной тариф “Полный доступ” по центру:
заголовок блока: “Тариф «Полный доступ»”;
краткое описание;
карточка тарифа:
Карточка должна быть визуально выделена: тень, скругления, чуть более крупная.
Подвал (footer)
Тонкая линия сверху (граница).
Внутри:
На мобильном допускается вертикальное расположение (текст над ссылками).
Вам не нужно идеально повторить какой-то конкретный визуальный макет — важнее:
В тёмной теме следите за контрастом:
Можно использовать transition-colors duration-200 или подобные классы на body или крупные блоки, чтобы при смене темы цвета менялись плавно.
Переключатель темы (кнопка “Light/Dark”) в этом задании не обязателен — тёмная тема проверяется просто добавлением/удалением класса dark вручную.
index.html (стартовый каркас для студента)<!DOCTYPE html>
<html lang="ru" class="">
<head>
<meta charset="UTF-8">
<title>Задание 3 — лендинг курса на Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50">
<!-- ШАПКА -->
<header class="border-b border-gray-200 dark:border-gray-800">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
<!-- ЛОГОТИП -->
<div class="text-xl font-bold">
<!-- TODO: добавить оформление логотипа TailwindSchool -->
TailwindSchool
</div>
<!-- НАВИГАЦИЯ -->
<nav class="hidden md:flex items-center gap-6 text-sm font-medium">
<!-- TODO: ссылки "Программа", "Формат", "Тарифы" и кнопка "Записаться" -->
</nav>
</div>
</header>
<main>
<!-- HERO-БЛОК -->
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-20">
<!-- TODO: двухколоночная сетка: слева текст (бейдж, заголовок, описание, кнопки), справа "картинка-заглушка" -->
</section>
<!-- БЛОК "ЧТО ВНУТРИ КУРСА" -->
<section id="format" class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-20">
<!-- TODO: заголовок, подзаголовок, grid с 3 карточками преимуществ -->
</section>
<!-- БЛОК "ТАРИФ" -->
<section id="pricing" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-20">
<!-- TODO: заголовок, подзаголовок и одна тарифная карточка -->
</section>
</main>
<!-- ПОДВАЛ -->
<footer class="border-t border-gray-200 dark:border-gray-800 mt-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-3">
<!-- TODO: текст слева и ссылки справа -->
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
© 2025 TailwindSchool. Все права защищены.
</p>
<div class="flex flex-wrap gap-4 text-xs sm:text-sm text-gray-500 dark:text-gray-400">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-200">Политика конфиденциальности</a>
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-200">Договор оферты</a>
</div>
</div>
</footer>
</body>
</html>