Cover + avatar.

The component#

html
<div><div class="h-40 rounded-2xl bg-gradient-to-r from-blue-500 to-fuchsia-500"></div><div class="-mt-10 flex items-end gap-4 px-6"><img class="size-20 rounded-full ring-4 ring-white" src="a.jpg" alt="" /><div class="pb-1"><h1 class="font-bold">Ayesha</h1></div></div></div>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components