Skip to content
Forge

Toast notifications

Short notifications that appear at the bottom of the screen after an action, then disappear.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Messages are added to a role="status" area politely announced by screen readers. Each notification closes on its own after 8 seconds, but the delay pauses while it is hovered or focused, and a button closes it. At most three notifications stay visible.

Code

Loading the code…

Archive contents

notifications-toast-html-tailwind.zip3 files · 4 Ko

  • index.html4 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • Notification center

    Free

    A bell with an unread badge that opens a notification panel: icons by type, read and unread items told apart, and a "Mark all as read" button.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Four-level alerts

    Free

    The four classic interface messages: information, success, warning and error.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Documentation callouts

    Free

    Three callouts for technical documentation: note, tip and warning.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Form error summary

    Coming soon

    A box at the top of a form listing the errors, each with a link to the field concerned.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component