mp-lista-de-avatares's Introduction

📅 Lista de Avatares com TailwindCSS

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.

mp-lista-de-avatares's People