Projeto Toast notification animado

Prepare-se para adicionar um toque especial às suas notificações! Neste mini projeto, você irá criar um Toast Notification animado usando Tailwind CSS.

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

image

📝 Inspiração

Tutorial

Capa do tutorial (thumbnail)

Junte-se a outras 39 pessoas que estão fazendo esse mini projeto.

Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário