Explore e amplie suas habilidades com TailwindCSS criando um componente visual de lista de avatares!
- Utilize TailwindCSS para estilizar e criar o componente.
- O componente deve ser desenvolvido pensando na responsividade e adaptabilidade.
- 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.
- Faça o deploy de uma página utilizando o seu componente.
- Disponibilize o componente como uma lib no npm.
- 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.
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para usar sua criatividade e criar um design único.
TailwindCSS
HTML, CSS
- (Opcional)
JavaScript, React
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.
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.