Skip to content
Forge

Notification center

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
Open in a new tab

Description

The panel follows the disclosure pattern: Escape or an outside click closes it and returns focus to the bell. The unread count is in the button's accessible name, each unread notification says so, and without JavaScript the list stays visible.

Code

Loading the code…

Archive contents

centre-notifications-html-tailwind.zip3 files · 5 Ko

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

Tags

Updated on October 13, 2026.

In the same spirit

  • Toast notifications

    Coming soon

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

    • 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