Урок 06. Примеры: цвет в интерфейсе

<div class="flex flex-wrap gap-2">
  <span class="rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Оплачено</span>
  <span class="rounded-full border border-amber-200 bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800">Ожидает</span>
  <span class="rounded-full border border-rose-200 bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-800">Отклонено</span>
  <span class="rounded-full border border-slate-200 bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700">Черновик</span>
</div>

<div class="flex flex-wrap items-center gap-3">
  <button class="rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">Основная</button>
  <button class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Вторичная</button>
  <button class="rounded-md px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100">Призрачная</button>
  <button class="rounded-md bg-rose-600 px-4 py-2 text-sm font-medium text-white hover:bg-rose-700">Опасная</button>
</div>

<div class="max-w-sm space-y-3">
  <input class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/30" placeholder="Обычное поле">
  <input class="w-full rounded-md border border-rose-400 bg-rose-50 px-3 py-2 text-sm text-rose-900 placeholder:text-rose-300" placeholder="Поле с ошибкой">
  <input class="w-full rounded-md border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-400" placeholder="Отключено" disabled>
</div>

<div class="relative h-48 overflow-hidden rounded-lg bg-slate-100">
  <div class="p-4 text-sm text-slate-600">Содержимое страницы под окном…</div>
  <div class="absolute inset-0 bg-slate-900/50"></div>
  <div class="absolute inset-x-6 top-10 rounded-lg border border-slate-200 bg-white p-4 shadow-lg">
    <p class="text-sm font-semibold text-slate-900">Удалить отчёт?</p>
    <p class="mt-1 text-sm text-slate-600">Действие нельзя отменить.</p>
  </div>
</div>

<div class="overflow-hidden rounded-xl">
  <div class="bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 p-8">
    <p class="text-xs font-semibold uppercase tracking-widest text-white/80">Курс</p>
    <h3 class="mt-1 text-2xl font-semibold tracking-tight text-white">Tailwind CSS и shadcn/ui</h3>
    <p class="mt-2 max-w-sm text-sm text-white/90">Градиент плюс белый текст с прозрачностью — простой способ сделать обложку.</p>
  </div>
</div>

<div class="flex flex-wrap gap-3">
  <button class="inline-flex items-center gap-2 rounded-md bg-slate-900 px-3 py-2 text-sm text-white">
    <svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 3l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4L5.5 16.8l.9-5L2.8 8.3l5-.7L10 3z"/></svg>
    В избранное
  </button>
  <button class="inline-flex items-center gap-2 rounded-md border border-slate-300 px-3 py-2 text-sm text-sky-700">
    <svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 3l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4L5.5 16.8l.9-5L2.8 8.3l5-.7L10 3z"/></svg>
    Тот же значок
  </button>
</div>