Лендинг по секциям

Лендинг — одностраничный сайт, который рассказывает о продукте и ведёт к одному действию, например к покупке. Соберём лендинг магазина наушников по секциям. Каждая секция — отдельный блок <section> или <header> с одинаковой внутренней обёрткой.

Обёртка секции

Во всех секциях содержимое ограничено по ширине и выровнено по центру одной и той же парой классов: mx-auto max-w-5xl px-4. Фон секции растягивается на всю ширину, а текст остаётся в аккуратной колонке.

Шапка

Логотип слева, меню справа. На телефоне меню скрыто классом hidden, а с sm: появляется:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<header class="border-b border-gray-200 bg-white">
  <div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
    <a href="#" class="text-lg font-bold text-indigo-600">SoundShop</a>
    <nav class="hidden gap-6 text-sm text-gray-600 sm:flex">
      <a href="#" class="hover:text-gray-900">Каталог</a>
      <a href="#" class="hover:text-gray-900">Доставка</a>
      <a href="#" class="hover:text-gray-900">Контакты</a>
    </nav>
  </div>
</header>

Главный экран

Крупный заголовок, короткий текст и две кнопки. На широком экране справа появляется картинка:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<section class="bg-linear-to-br from-indigo-50 to-white">
  <div class="mx-auto grid max-w-5xl items-center gap-8 px-4 py-12 md:grid-cols-2">
    <div>
      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">Звук, который едет с вами</h1>
      <p class="mt-4 text-lg text-gray-600">Наушники и колонки с доставкой за один день.</p>
      <div class="mt-6 flex flex-wrap gap-3">
        <a href="#" class="rounded-lg bg-indigo-600 px-5 py-3 font-medium text-white hover:bg-indigo-500">Смотреть каталог</a>
        <a href="#" class="rounded-lg border border-gray-300 px-5 py-3 font-medium text-gray-700 hover:bg-gray-50">Узнать о скидках</a>
      </div>
    </div>
    <img src="/media/photo-800x500.jpg" alt="Наушники" class="hidden rounded-2xl shadow-xl md:block">
  </div>
</section>

Градиент делает фон живым, но не спорит с текстом. Кнопки переносятся на новую строку, если не помещаются.

Товары

Сетка карточек — та самая карточка из прошлых глав, теперь в адаптивной сетке:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<section class="mx-auto max-w-5xl px-4 py-12">
  <h2 class="text-2xl font-bold text-gray-900">Популярное</h2>
  <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    <div class="group overflow-hidden rounded-xl bg-white shadow transition hover:shadow-lg">
      <img src="/media/photo-400x250.jpg" alt="Наушники" class="h-40 w-full object-cover">
      <div class="flex items-center justify-between p-4">
        <h3 class="font-semibold group-hover:text-indigo-600">Наушники</h3>
        <span class="font-bold">$79</span>
      </div>
    </div>
    <div class="group overflow-hidden rounded-xl bg-white shadow transition hover:shadow-lg">
      <img src="/media/photo-400x250.jpg" alt="Колонка" class="h-40 w-full object-cover">
      <div class="flex items-center justify-between p-4">
        <h3 class="font-semibold group-hover:text-indigo-600">Колонка</h3>
        <span class="font-bold">$45</span>
      </div>
    </div>
  </div>
</section>

В проекте карточки выводят циклом или компонентом, как в уроке о повторном использовании.

Призыв к действию и подвал

Контрастная полоса с подпиской и простой подвал завершают страницу:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<section class="bg-indigo-600">
  <div class="mx-auto flex max-w-5xl flex-col gap-4 px-4 py-10 sm:flex-row sm:items-center sm:justify-between">
    <p class="text-xl font-semibold text-white">Скидка 10% на первый заказ</p>
    <a href="#" class="rounded-lg bg-white px-5 py-3 text-center font-medium text-indigo-700 hover:bg-indigo-50">Получить код</a>
  </div>
</section>
<footer class="mx-auto max-w-5xl px-4 py-6 text-sm text-gray-500">
  © 2026 SoundShop. Москва, ул. Примерная, 1.
</footer>

На телефоне текст и кнопка стоят друг под другом, на широком экране — в ряд по краям.

Частая ошибка

Задавать каждой секции свою ширину и отступы — max-w-4xl здесь, max-w-6xl px-8 там. Края секций перестают совпадать, и страница выглядит неряшливо. Используйте одну обёртку во всех секциях, а в проекте вынесите её в компонент Container.

Спасибо, что читаете!