Lista de avatares com TailwindCSS e shadcn/ui

Explore e amplie suas habilidades com TailwindCSS criando um componente visual de lista de avatares!

🔨 Requisitos

• Utilize TailwindCSS para estilizar e criar o componente.
• O componente deve ser desenvolvido pensando na responsividade e adaptabilidade.

Componente da Lista de Avatares

• Crie um componente que exiba uma lista de avatares.
  • Os avatares devem ficar levemente sobrepostos uns aos outros.
  • A lista de avatares deve se adaptar à largura do container que a contém.
• Desenvolva uma borda com gradiente para cada avatar.
• Torne o componente customizável:
  • Através de variáveis CSS ou, se estiver usando uma biblioteca como React, com props.
  • Algumas opções de customização: cor da borda, tamanho da borda e tamanho dos avatares.

Deploy

• Faça o deploy de uma página utilizando o seu componente.

🔨 Desafios extras para quem quer ir além

• Disponibilize o componente como uma lib no npm.

🔍 Dicas

• Estude sobre as capacidades do TailwindCSS, um framework CSS focado na produtividade e eficiência.
• Se estiver usando o React, familiarize-se com a passagem de props e customização de componentes.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para usar sua criatividade e criar um design único.

🔗 Link do Figma

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

TailwindCSS

Pré-requisitos

• HTML, CSS
• (Opcional) JavaScript, React

❓ FAQ

Posso utilizar outros frameworks além do TailwindCSS?

Esse projeto foi pensado especificamente para praticar o uso do TailwindCSS na criação de componentes visuais. Portanto, a resolução oficial seguirá essa direção.

Se desejar explorar outros frameworks, sinta-se à vontade. No entanto, a solução oficial pode não abordar essas variações.

Como faço para ver a resolução oficial?

A resolução oficial sempre é disponibilizada no site oficial do Codante. Algumas resoluções são abertas e outras são exclusivas para os nossos membros PRO.