Toast notifications com TailwindCSS

Aprimore a experiência do usuário em seu projeto web com uma toast notification animada desenvolvida com Tailwind CSS. Neste mini projeto, vamos explorar como criar uma notificação flutuante elegante e interativa que chama a atenção do usuário de forma sutil e eficaz.

🔨 Requisitos

• Crie um botão "Mostrar notificação".
  • Ao ser clicado o botão exibirá uma notificação "toast" na tela.
• A notificação deverá aparecer por 5 segundos.
• A notificação deve ser exibida no canto superior direito da tela.
• A notificação deve exibir o avatar, nome, mensagem e uma opção de fechar a notificação.
• Utilize o framework Tailwind CSS para estilizar os elementos da notificação.
• Implemente uma animação de entrada e saída suave para a toast notification.
• Adicione interatividade à notificação, permitindo que o usuário a feche manualmente.

🔨 Desafios extra

• Implemente uma forma de mudar onde a notificação vai aparecer na tela. Por exemplo, no canto superior esquerdo ou no canto inferior direito.
• Toque um som quando a notificação aparecer.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Mas sinta-se livre para utilizar a criatividade e fazer o seu próprio estilo de notificação.

🔗 Acesse o link do Figma

📝 Inspiração

• React Hot Toast