Admin - Bibliotheque des elements uniques

Logo Urban

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
text-lg font-bold uppercase tracking-[0.22em]
text-zinc-900 dark:text-zinc-100

Boutons texte de la nav

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
text-lg text-zinc-600 dark:text-zinc-400
transition-colors hover:text-zinc-900 dark:hover:text-white

Bouton degrade + infos du bouton a droite

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
group inline-flex items-center justify-center gap-3 min-w-[180px]
px-4 py-2 rounded-lg bg-[linear-gradient(90deg,#fa5853,#f46692_50%,#ffc444)]
text-white font-semibold text-sm transition-all duration-200 shadow-lg hover:shadow-xl

JS:
var isHidden = menu.classList.contains("hidden");
closeAllProfileMenus(wrapper);
if (isHidden) {
  menu.classList.remove("hidden");
  toggle.setAttribute("aria-expanded", "true");
} else {
  closeProfileMenu(wrapper);
}

Titre principal degrade

Tableau de bord admin

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
text-5xl sm:text-6xl font-extrabold leading-tight
text-transparent bg-clip-text
bg-[linear-gradient(111deg,#60aef8,#f46692_50%,#f3a562)]

Card statistique de reference

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
mt-6 mx-auto w-full max-w-xl rounded-2xl
bg-white dark:bg-zinc-800 p-4 sm:p-5 shadow-xl

Bouton action de section

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
group inline-flex items-center justify-center w-[180px]
px-5 py-4 rounded-lg bg-zinc-950 text-white text-sm font-semibold
transition-[background-color,box-shadow,filter] duration-200
shadow-lg hover:bg-zinc-800 hover:shadow-xl
dark:bg-[linear-gradient(90deg,#fa5853,#f46692_50%,#ffc444)] dark:hover:brightness-105

Badges de statut

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
rounded-full px-2 py-1 text-[11px]
Publie: bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200
En attente: bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200
Signale: bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200

Infos Tailwind / JS

Tailwind ref (admin/page.tsx):
rounded-xl bg-zinc-100 dark:bg-zinc-700/50 p-4 shadow-sm