Соберём небольшой, но «живой» лендинг: шапка, hero, карточки и футер. Главная фишка — правильно сочетать Flex, Grid и @container, чтобы страница выглядела аккуратно и на телефоне, и на десктопе.

Навигация по статье

Быстрая подготовка темы

<style>
  @theme {
    --color-brand: #4f46e5; /* фирменный фиолетовый */
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  }
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap">

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

После этого доступны классы bg-brand, text-brand, font-sans.

Полный каркас

<body class="font-sans bg-gray-50 text-gray-800 antialiased">

  <!-- Header -->
  <header class="sticky top-0 z-50 bg-white/80 backdrop-blur shadow-sm">
    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
      <a href="#" class="text-xl font-bold text-brand">MySite</a>

      <nav class="hidden md:flex items-center gap-6">
        <a class="text-gray-600 hover:text-brand" href="#">Главная</a>
        <a class="text-gray-600 hover:text-brand" href="#">О нас</a>
        <a class="text-gray-600 hover:text-brand" href="#">Контакты</a>
      </nav>

      <button class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-gray-100" aria-label="Открыть меню">
        <span class="sr-only">Меню</span>≡
      </button>
    </div>
  </header>

  <!-- Hero -->
  <section class="bg-brand text-white">
    <div class="max-w-6xl mx-auto px-6 py-20 flex flex-col items-center text-center gap-6">
      <h1 class="text-3xl sm:text-5xl font-bold leading-tight">Создаём сайты быстрее</h1>
      <p class="text-lg sm:text-xl/relaxed max-w-2xl opacity-90">
        Tailwind v4 экономит время: компоненты собираются из утилит, а адаптивность даётся «из коробки».
      </p>
      <div class="flex flex-col sm:flex-row gap-3">
        <a href="#" class="bg-white text-brand px-6 py-3 rounded-xl font-semibold hover:bg-gray-100">Начать</a>
        <a href="#" class="bg-white/10 text-white px-6 py-3 rounded-xl font-semibold hover:bg-white/20">Подробнее</a>
      </div>
    </div>
  </section>

  <!-- Cards: Grid + @container -->
  <section class="max-w-6xl mx-auto px-6 py-16">
    <h2 class="text-2xl sm:text-3xl font-bold text-center mb-10">Наши услуги</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <article class="@container bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 p-6 transition hover:shadow-md">
        <div class="grid grid-cols-1 @md:grid-cols-2 gap-4 items-center">
          <img src="service1.jpg" alt="Веб-разработка" class="w-full h-36 object-cover rounded-lg">
          <div>
            <h3 class="text-lg @md:text-xl font-semibold mb-1">Веб-разработка</h3>
            <p class="text-gray-600 @md:text-gray-800 mb-3">Современные сайты и приложения.</p>
            <button class="bg-brand text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-600">Заказать</button>
          </div>
        </div>
      </article>

      <article class="@container bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 p-6 transition hover:shadow-md">
        <div class="grid grid-cols-1 @md:grid-cols-2 gap-4 items-center">
          <img src="service2.jpg" alt="UI/UX дизайн" class="w-full h-36 object-cover rounded-lg">
          <div>
            <h3 class="text-lg @md:text-xl font-semibold mb-1">UI/UX дизайн</h3>
            <p class="text-gray-600 @md:text-gray-800 mb-3">Интерфейсы, которые любят пользователи.</p>
            <button class="bg-brand text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-600">Заказать</button>
          </div>
        </div>
      </article>

      <article class="@container bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 p-6 transition hover:shadow-md">
        <div class="grid grid-cols-1 @md:grid-cols-2 gap-4 items-center">
          <img src="service3.jpg" alt="Маркетинг" class="w-full h-36 object-cover rounded-lg">
          <div>
            <h3 class="text-lg @md:text-xl font-semibold mb-1">Маркетинг</h3>
            <p class="text-gray-600 @md:text-gray-800 mb-3">Рост трафика и конверсий.</p>
            <button class="bg-brand text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-600">Заказать</button>
          </div>
        </div>
      </article>

    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-100">
    <div class="max-w-6xl mx-auto px-6 py-10 grid grid-cols-1 sm:grid-cols-3 gap-8 text-sm">
      <div>
        <p class="text-brand font-semibold mb-2">MySite</p>
        <p class="text-gray-600">Делаем понятные интерфейсы быстро.</p>
      </div>
      <nav class="flex flex-col gap-2">
        <a class="text-gray-600 hover:text-brand" href="#">Портфолио</a>
        <a class="text-gray-600 hover:text-brand" href="#">Блог</a>
        <a class="text-gray-600 hover:text-brand" href="#">Поддержка</a>
      </nav>
      <div class="text-gray-500 sm:text-right">© 2025 MySite</div>
    </div>
  </footer>

</body>

Как это устроено (коротко)

Header: flex для выравнивания; на мобильных скрываем меню (hidden md:flex), оставляем «бургер».
Hero: центрирование через flex, две кнопки в ряд на больших экранах (sm:flex-row), ограничиваем ширину текста (max-w-2xl).
Cards: глобально — Grid (1→2→3 колонки). Каждая карточка — @container: при ширине контейнера @md картинка и текст становятся рядом.
Footer: простая grid 1→3, аккуратные ссылки и копирайт.

Три полезных приёма

antialiased на body — мягче отрисовка шрифтов.
ring-1 ring-gray-100 + лёгкая тень — «воздух» вокруг карточек без перегруза.
sticky top-0 backdrop-blur у шапки — читаемая «липкая» навигация.

Доступность

Всегда ставьте понятные alt у изображений.
Иконкам — aria-label или .sr-only подписи.
Держите контраст кнопок и текста на уровне (проверьте hover-состояния).

Мини-задания ✍️

Добавь раздел «Отзывы»: сетка 1→2, карточки — @container (увеличивай шрифт заголовка на @md).
Сделай тёмную тему: добавь на html класс dark и применяй пары вида bg-white dark:bg-gray-900, text-gray-800 dark:text-gray-100.
Добавь вторую кнопку в hero и выровняй их через flex gap-3.

Итог

Flex — для выравнивания и простых рядов, Grid — для сеток, @container — чтобы компоненты умно подстраивались под своё пространство. В связке они дают быстрый, чистый и по-настоящему адаптивный лендинг без лишнего CSS.