Урок 10. Примеры: метки, липкие панели, оверлеи

📁 Раздел: Раскладка ⏱️ Время изучения: ~45 мин 🎯 Сложность: Средняя

⚡ Кратко

Шесть примеров: метка на карточке, кнопка поверх обложки, липкая панель, модальное окно, подсказка и горизонтальная лента.

1. Метка на карточке товара

−30%

Наушники

7 900 ₽ 5 530 ₽

<div class="relative w-56 overflow-hidden rounded-xl border border-slate-200 bg-white">
  <span class="absolute top-3 left-3 z-10 rounded-full bg-rose-600 px-2 py-0.5 text-xs font-semibold text-white">−30%</span>
  <div class="h-28 bg-slate-100"></div>
  <div class="p-4">
    <h3 class="text-sm font-medium text-slate-900">Наушники</h3>
    <p class="mt-1 text-sm text-slate-500"><s class="text-slate-400">7 900 ₽</s> 5 530 ₽</p>
  </div>
</div>

2. Кнопка поверх обложки

Вебинар

Tailwind на практике

<div class="relative h-36 w-full max-w-md overflow-hidden rounded-xl">
  <div class="absolute inset-0 bg-linear-to-r from-slate-800 to-slate-600"></div>
  <div class="absolute inset-0 flex items-center justify-between p-5">
    <div>
      <p class="text-xs font-semibold uppercase tracking-widest text-white/70">Вебинар</p>
      <h3 class="mt-1 text-lg font-semibold text-white">Tailwind на практике</h3>
    </div>
    <button class="rounded-md bg-white px-3 py-2 text-sm font-medium text-slate-900 hover:bg-slate-100">Смотреть</button>
  </div>
</div>

3. Липкая панель действий

Выбрано: 3
  • Документ 1
  • Документ 2
  • Документ 3
  • Документ 4
  • Документ 5
  • Документ 6
  • Документ 7
  • Документ 8
<div class="h-56 overflow-y-auto rounded-lg border border-slate-200 bg-white">
  <div class="sticky top-0 z-10 flex items-center justify-between border-b border-slate-200 bg-white/95 px-4 py-2">
    <span class="text-sm font-semibold text-slate-900">Выбрано: 3</span>
    <div class="flex gap-2">
      <button class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700">Экспорт</button>
      <button class="rounded-md bg-rose-600 px-2 py-1 text-xs text-white">Удалить</button>
    </div>
  </div>
  <ul class="divide-y divide-slate-100 text-sm text-slate-700">
    <li class="px-4 py-3">Документ 1</li><li class="px-4 py-3">Документ 2</li>
    <li class="px-4 py-3">Документ 3</li><li class="px-4 py-3">Документ 4</li>
    <li class="px-4 py-3">Документ 5</li><li class="px-4 py-3">Документ 6</li>
    <li class="px-4 py-3">Документ 7</li><li class="px-4 py-3">Документ 8</li>
  </ul>
</div>

4. Модальное окно (статичная демонстрация)

Страница под окном

Подтвердите действие

Документ будет перемещён в архив.

<div class="relative h-56 overflow-hidden rounded-lg bg-slate-100">
  <div class="p-4 text-sm text-slate-500">Страница под окном</div>
  <div class="absolute inset-0 z-40 bg-slate-900/50"></div>
  <div class="absolute inset-x-6 top-1/2 z-50 -translate-y-1/2 rounded-xl bg-white p-5 shadow-2xl">
    <h3 class="text-sm font-semibold text-slate-900">Подтвердите действие</h3>
    <p class="mt-1 text-sm text-slate-600">Документ будет перемещён в архив.</p>
    <div class="mt-4 flex justify-end gap-2">
      <button class="rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-700">Отмена</button>
      <button class="rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white">В архив</button>
    </div>
  </div>
</div>

В реальном приложении такой блок рисуют через портал в конце body с fixed inset-0 — тогда он гарантированно окажется поверх всего. Готовый компонент — в уроке 21.

5. Подсказка при наведении

Наведите курсор на кнопку.

Подсказка появляется по наведению 
<div class="group relative inline-block">
  <button class="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-700">Что это?</button>
  <span class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md bg-slate-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100">
    Подсказка появляется по наведению
  </span>
</div>

pointer-events-none нужен, чтобы подсказка не перехватывала курсор и не мешала кликнуть по кнопке.

6. Горизонтальная лента с прилипанием

Слайд 1
Слайд 2
Слайд 3
Слайд 4
<div class="flex snap-x snap-mandatory gap-3 overflow-x-auto rounded-lg border border-slate-200 p-3">
  <div class="w-40 shrink-0 snap-center rounded-lg bg-sky-100 p-4 text-sm text-sky-900">Слайд 1</div>
  <div class="w-40 shrink-0 snap-center rounded-lg bg-emerald-100 p-4 text-sm text-emerald-900">Слайд 2</div>
  <div class="w-40 shrink-0 snap-center rounded-lg bg-amber-100 p-4 text-sm text-amber-900">Слайд 3</div>
  <div class="w-40 shrink-0 snap-center rounded-lg bg-violet-100 p-4 text-sm text-violet-900">Слайд 4</div>
</div>