Skip to content
Forge

Top cookie banner

A banner at the top of the page, in the document flow, that never hides content.

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

Description

The "Refuse all" button looks exactly like "Accept all", as the CNIL requires, and no box is pre-checked. The choice is kept for six months then asked again; a "Manage cookies" button lets visitors change it at any time. A consentchange event passes the choices to your scripts so trackers load only after consent. Placed in the flow, it pushes the page down instead of covering it, and it is the first element reached by keyboard.

Code

Loading the code…

Archive contents

cookies-bandeau-haut-html-tailwind.zip3 files · 5 Ko

  • index.html9 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 12, 2026.

In the same spirit

  • Compact dark cookie banner

    Free

    A rounded dark bar floating at the bottom of the screen, text on the left and buttons on the right on large screens.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Detailed cookie preferences

    Coming soon

    A panel that directly shows each cookie category with its checkbox, without an extra step.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Institutional cookie banner

    Free

    An understated banner with square corners and a thick rule, suited to local authorities, firms and public institutions.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Friendly bakery cookie banner

    Coming soon

    A playful card with a CSS-drawn cookie, for a bakery, pastry shop or café.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component