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.
- 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.
- 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.
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.
Desde os requisitos e desafios extras eu consegui completar como foi peidido, além disso, implementei a feature de salvar em localStorage a opção que posiciona as notificações na parte superior esquerda e na parte inferior direita.
✅ Funcionalidade de mostrar a notificação
✅ Fecha a notificação automaticamente após 5 segundos
✅ Botão que permiti fechar a notificação manualmente
✅ Funcionalide de trocar a posição onde vai aparece a notificação
✅ Som de notificação
✅ Salvar a opção selecionada pelo usuário