Skip to content
Forge

Dismissible announcement bar

An announcement bar at the top of the page with a link and a button to close it.

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

Description

The close button has an explicit accessible name and a 44-pixel hit area. After closing, focus moves to the main content so keyboard users are not lost. The React version exposes an onDismiss callback to remember the choice.

Code

Loading the code…

Archive contents

alerte-bandeau-annonce-html-tailwind.zip3 files · 3 Ko

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

Tags

Updated on October 12, 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