Код IT
← Каталог

Tailwind — готовые блоки — Навигация с липкой шапкой

Фрагмент из «Tailwind — готовые блоки»: Навигация с липкой шапкой.

html lab1117 embed URL статья в энциклопедии
HTML main.html 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sticky navbar</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-slate-800">
  <header class="sticky top-0 z-10 border-b border-slate-200 bg-white/90 backdrop-blur">
    <div class="mx-auto flex max-w-3xl items-center justify-between px-5 py-3">
      <span class="font-bold">Журнал</span>
      <nav class="flex gap-4 text-sm text-slate-600">
        <a href="#" class="hover:text-indigo-600">Статьи</a>
        <a href="#" class="hover:text-indigo-600">О нас</a>
      </nav>
    </div>
  </header>
  <main class="mx-auto max-w-3xl space-y-4 px-5 py-6">
    <h1 class="text-2xl font-bold">Длинная статья</h1>
    <p class="text-slate-600">Прокрутите вниз — шапка останется сверху.</p>
    <p class="text-slate-600">Ещё абзац для проверки прокрутки…</p>
    <p class="text-slate-600">…и ещё один абзац.</p>
    <p class="text-slate-600">…и ещё один абзац.</p>
  </main>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sticky navbar</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-slate-800">
  <header class="sticky top-0 z-10 border-b border-slate-200 bg-white/90 backdrop-blur">
    <div class="mx-auto flex max-w-3xl items-center justify-between px-5 py-3">
      <span class="font-bold">Журнал</span>
      <nav class="flex gap-4 text-sm text-slate-600">
        <a href="#" class="hover:text-indigo-600">Статьи</a>
        <a href="#" class="hover:text-indigo-600">О нас</a>
      </nav>
    </div>
  </header>
  <main class="mx-auto max-w-3xl space-y-4 px-5 py-6">
    <h1 class="text-2xl font-bold">Длинная статья</h1>
    <p class="text-slate-600">Прокрутите вниз — шапка останется сверху.</p>
    <p class="text-slate-600">Ещё абзац для проверки прокрутки…</p>
    <p class="text-slate-600">…и ещё один абзац.</p>
    <p class="text-slate-600">…и ещё один абзац.</p>
  </main>
</body>
</html>