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.
