🧭 Шапка сайта

<header class="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-3
               dark:border-slate-700 dark:bg-slate-900">
  <div class="flex items-center gap-2">
    <div class="size-7 rounded bg-slate-900 dark:bg-slate-100"></div>
    <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">Продукт</span>
  </div>
  <nav class="hidden items-center gap-6 text-sm text-slate-600 md:flex dark:text-slate-300">
    <a class="hover:text-slate-900 dark:hover:text-white" href="#">Возможности</a>
    <a class="hover:text-slate-900 dark:hover:text-white" href="#">Цены</a>
    <a class="hover:text-slate-900 dark:hover:text-white" href="#">Документация</a>
  </nav>
  <div class="flex items-center gap-2">
    <button class="hidden rounded-md px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100 sm:block
                   dark:text-slate-300 dark:hover:bg-slate-800">Войти</button>
    <button class="rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900">Начать</button>
    <button class="rounded-md border border-slate-300 p-1.5 text-slate-600 md:hidden dark:border-slate-600 dark:text-slate-300" aria-label="Меню">☰</button>
  </div>
</header>

<header class="flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-4 py-2
               dark:border-slate-700 dark:bg-slate-900">
  <div class="flex shrink-0 items-center gap-2">
    <div class="size-6 rounded bg-sky-600"></div>
    <span class="hidden text-sm font-semibold text-slate-900 sm:block dark:text-slate-50">Панель</span>
  </div>
  <input class="min-w-0 flex-1 rounded-md border border-slate-300 bg-transparent px-3 py-1.5 text-sm
                text-slate-900 placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/30 focus:outline-none
                dark:border-slate-600 dark:text-slate-100" placeholder="Поиск">
  <div class="flex shrink-0 items-center gap-2">
    <button class="rounded-md p-1.5 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800" aria-label="Уведомления">🔔</button>
    <div class="size-8 rounded-full bg-slate-200 dark:bg-slate-700"></div>
  </div>
</header>

<div class="h-48 overflow-y-auto rounded-lg border border-slate-200 dark:border-slate-700">
  <header class="sticky top-0 z-10 flex items-center justify-between border-b border-slate-200 bg-white/95 px-4 py-2
                 dark:border-slate-700 dark:bg-slate-900/95">
    <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">Липкая шапка</span>
    <button class="rounded-md bg-slate-900 px-2.5 py-1 text-xs text-white dark:bg-slate-100 dark:text-slate-900">Действие</button>
  </header>
  <div class="space-y-2 p-4 text-sm text-slate-600 dark:text-slate-400">
    <p>Прокрутите этот блок — шапка останется на месте.</p>
    <p>Фон должен быть достаточно плотным, чтобы текст под ним не просвечивал.</p>
    <p>Строка 3</p><p>Строка 4</p><p>Строка 5</p><p>Строка 6</p><p>Строка 7</p><p>Строка 8</p>
  </div>
</div>

<div class="max-w-sm overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
  <div class="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-slate-700">
    <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">Продукт</span>
    <button class="rounded-md border border-slate-300 p-1.5 text-slate-600 dark:border-slate-600 dark:text-slate-300" aria-label="Закрыть меню">✕</button>
  </div>
  <nav class="flex flex-col p-2 text-sm">
    <a class="rounded-md px-3 py-2 text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800" href="#">Возможности</a>
    <a class="rounded-md px-3 py-2 text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800" href="#">Цены</a>
    <a class="rounded-md px-3 py-2 text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800" href="#">Документация</a>
    <button class="mt-2 rounded-md bg-slate-900 px-3 py-2 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900">Начать</button>
  </nav>
</div>