NinA AI Agency
EN
Alle elementen

Freebies · UI-bibliotheek

Meldingenstapel

Nieuwe meldingen schuiven voorop, oudere liggen compact erachter en vouwen open met de muis.

KlikkenGratis

Betaling mislukt

Probeer een andere kaart.

Kai doet mee

Kai kan nu meelezen en reageren.

offerte.pdf geüpload

Opgeslagen in Klanten.

Werkt inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus werkende code in één keer. Plak het in Claude Code, Codex, Gemini, Copilot of Cursor.

Bouw een interactief UI-element: Meldingenstapel.

Wat het is: Nieuwe meldingen schuiven voorop, oudere liggen compact erachter en vouwen open met de muis.

Gedrag:
- Knop "Toon melding" voegt een toast toe (titel, korte tekst, gekleurde stip).
- De nieuwste toast staat vooraan; oudere liggen compact erachter, telkens 12 px hoger en 5% kleiner, maximaal drie zichtbaar.
- Met de muis op de stapel vouwt hij open tot een lijst; muis eraf en hij klapt weer in.
- Elke toast verdwijnt na 5 seconden; aria-live voor screenreaders.

Eisen:
- Werk in de stack van dit project. Is het React met Tailwind CSS, maak dan één component zonder extra pakketten; anders gewone HTML, CSS en JavaScript.
- Volledig bedienbaar met toetsenbord en touch, met de juiste aria-attributen.
- Respecteer prefers-reduced-motion: minder of geen beweging.
- Neem de kleuren, lettertypes en afrondingen van mijn project over.
- Laat me aan het eind zien waar het component staat en hoe ik het gebruik.

Speel verder